学习vuex!

入门/cli/hello-cli/src/components/vuex/App1.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-29 11:36:29
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 14:04:19
+ * @LastEditTime: 2022-11-29 15:26:38
  * @FilePath: \hello-cli\src\components\vuex\App1.vue
  * @Description: 
  * 
@@ -10,7 +10,7 @@
 -->
 <template>
   <div class="container">
-    <h1>计数器一：{{ count }}</h1>
+    <h1>计数器一：{{ this.$store.state.count }}</h1>
     <el-button type="primary" v-on:click="addCount()">更新计数器</el-button>
   </div>
 </template>
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     addCount() {
-      this.count++;
+      this.$store.commit("increment");
     },
   },
 };

入门/cli/hello-cli/src/components/vuex/App2.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-29 13:10:21
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 14:04:50
+ * @LastEditTime: 2022-11-29 15:29:07
  * @FilePath: \hello-cli\src\components\vuex\App2.vue
  * @Description: 
  * 
@@ -10,8 +10,8 @@
 -->
 <template>
   <div class="container">
-    <h1>计数器二：{{ count }}</h1>
-    <el-button type="primary" v-on:click="addCount()">更新计数器</el-button>
+    <h1>计数器二：{{ this.$store.state.count }}</h1>
+    <el-button type="danger" v-on:click="addCount()">更新计数器</el-button>
   </div>
 </template>
 
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     addCount() {
-      this.count++;
+      this.$store.commit("increment");
     },
   },
 };

入门/cli/hello-cli/src/main.js

@@ -2,19 +2,32 @@
  * @Author: Kane
  * @Date: 2022-11-22 17:50:49
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 13:04:26
+ * @LastEditTime: 2022-11-29 15:23:25
  * @FilePath: \hello-cli\src\main.js
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
  */
 import { createApp } from 'vue';
+import { createStore } from "vuex";
 import App from './App.vue';
 import ElementPlus from "element-plus";
 import 'element-plus/dist/index.css';
 
 const app = createApp(App);
-
+const vuex = createStore({
+    state() {
+        return {
+            count: 0,
+        };
+    },
+    mutations: {
+        increment(state) {
+            state.count++;
+        }
+    }
+});
+app.use(vuex);
 app.use(ElementPlus);
 app.mount('#app');