保存进度！

入门/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 15:26:38
+ * @LastEditTime: 2022-11-29 15:51:01
  * @FilePath: \hello-cli\src\components\vuex\App1.vue
  * @Description: 
  * 
@@ -10,12 +10,14 @@
 -->
 <template>
   <div class="container">
-    <h1>计数器一：{{ this.$store.state.count }}</h1>
+    <h1>计数器一：{{ storeCount }}</h1>
     <el-button type="primary" v-on:click="addCount()">更新计数器</el-button>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "App-1",
   data() {
@@ -28,6 +30,9 @@ export default {
       this.$store.commit("increment");
     },
   },
+  computed: mapState({
+    storeCount: "count",
+  }),
 };
 </script>
 <style scoped>

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

@@ -1,8 +1,9 @@
+<!-- eslint-disable no-unused-vars -->
 <!--
  * @Author: Kane
  * @Date: 2022-11-29 13:10:21
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 15:29:07
+ * @LastEditTime: 2022-11-29 16:07:22
  * @FilePath: \hello-cli\src\components\vuex\App2.vue
  * @Description: 
  * 
@@ -10,12 +11,15 @@
 -->
 <template>
   <div class="container">
-    <h1>计数器二：{{ this.$store.state.count }}</h1>
+    <h1>计数器二：{{ this.$store.getters.countText }}</h1>
     <el-button type="danger" v-on:click="addCount()">更新计数器</el-button>
   </div>
 </template>
 
 <script>
+//引入mapState
+//import { mapState } from "vuex";
+
 export default {
   name: "App-2",
   data() {
@@ -28,6 +32,11 @@ export default {
       this.$store.commit("increment");
     },
   },
+  computed: {
+    storeCount() {
+      return this.$store.state.count;
+    },
+  },
 };
 </script>
 <style scoped>