'add'

README.md

@@ -38,6 +38,7 @@
 - chapter33 vuex初探(一)
 - chapter34 vuex初探(二)
 - chapter35 vuex初探(三)
+- chapter36 vuex初探(四)
 - MongoDB的安装
 - MongoDB服务的配置
 - MongoDB基本语法

src/view/test.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="test">
     <router-link to="/testCity">←返回testCity页面</router-link>
-    <div>获取vuex中的值：{{this.$store.state.city}}</div>
+    <!-- <div>获取vuex中的值：{{this.$store.state.city}}</div> -->
+    <div>获取vuex中的值：{{this.city}}</div>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "test",
   components: {},
@@ -17,7 +20,11 @@ export default {
   created() {},
   mounted() {},
   watch: {},
-  computed: {},
+  computed: {
+    // 使用mapState辅助函数帮助我们生成计算属性
+    // 将this.city映射为this.$store.state.city
+    ...mapState(["city"])
+  },
   methods: {}
 };
 </script>

src/view/testCity.vue

@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import { mapActions } from "vuex";
+
 export default {
   name: "TestCity",
   components: {},
@@ -28,8 +30,12 @@ export default {
   computed: {},
   methods: {
     click(city) {
-      this.$store.dispatch("changeCity", city);
-    }
+      // this.$store.dispatch("changeCity", city);
+
+      // 通过mapActions辅助函数，我们就可以将this.changeCity()映射为this.$store.dispatch('changeCity')
+      this.changeCity(city);
+    },
+    ...mapActions(["changeCity"])
   }
 };
 </script>