vue2

vue/高阶/project2/src/App.vue

@@ -14,16 +14,29 @@
       <router-link push active-class="news" to="/my">我的</router-link>
     </div>
     <keep-alive include="My">
-    <!-- <keep-alive exclude="My,Home"> -->
-    <!-- <keep-alive include="My,Home"> -->
+      <!-- <keep-alive exclude="My,Home"> -->
+      <!-- <keep-alive include="My,Home"> -->
       <router-view></router-view>
     </keep-alive>
   </div>
+  <!-- 
+    通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。
+    
+    页面通过mapActions异步提交事件到actions。actions通过commit把对应参数同步提交到mutations。
+    mutations会修改state中对于的值。 最后通过getters把对应值跑出去，在页面的计算属性中
+    通过mapGetters来动态获取state中的值
+
+    应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事件； 异步逻辑应该封装在actions中。
+    state中保存着共有数据，数据是响应式的,唯一数据源
+    getters可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用
+    mutations定义的方法动态修改state中的数据，通过commit提交方法，方法必须是同步的
+    actions将mutations里面处理数据的方法变成异步的，就是异步操作数据，通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。
+    modules：模块化vuex
+   -->
 </template>
 
 <script>
-export default {
-};
+export default {};
 </script>
 
 <style lang="scss" scoped>

vue/高阶/project2/src/store/a.js

@@ -0,0 +1,29 @@
+export default {
+    namespaced: true,
+    // 类似于data 唯一数据源 存放全局状态 所有共享状态都在这里定义
+    state:{
+        userName:"图图",
+        age: 3,
+        count: 10
+    },
+    // 数据缓存、只读 相当于state的派生数据 类似于computed
+    getters:{
+        doubleCount(state) {
+            return state.count * 2;
+        }
+    },
+    mutations:{ 
+        addCount(state,payload) {
+            console.log(payload,'pay')
+            state.count += payload;
+        }
+    },
+    actions:{
+        asyncCount(context,payload) {
+            console.log(context,'content')
+            setTimeout(()=>{
+                context.commit("addCount",payload)
+            },2000)
+        }
+    }
+}

vue/高阶/project2/src/store/b.js

@@ -0,0 +1,27 @@
+export default {
+    namespaced: true,
+    // 类似于data 唯一数据源 存放全局状态 所有共享状态都在这里定义
+    // state:{
+    //     userName:"图图",
+    //     age: 3,
+    //     count: 10
+    // },
+    // // 数据缓存、只读 相当于state的派生数据 类似于computed
+    // getters:{
+    //     doubleCount(state) {
+    //         return state.count * 2;
+    //     }
+    // },
+    // mutations:{ 
+    //     addCount(state,payload) {
+    //         state.count += payload;
+    //     }
+    // },
+    // actions:{
+    //     asyncCount(context) {
+    //         setTimeout(()=>{
+    //             context.commit("addCount")
+    //         },2000)
+    //     }
+    // }
+}

vue/高阶/project2/src/store/index.js

@@ -2,27 +2,37 @@ import Vue from 'vue';
 import VueX from 'vuex';
 
 Vue.use(VueX);
+import a from './a';
+import b from './b';
 
 export default new VueX.Store({
     // 类似于data 唯一数据源 存放全局状态 所有共享状态都在这里定义
-    state:{
-        userName:"图图",
-        age: 3,
-        count: 10
-    },
-    // 数据缓存、只读 相当于state的派生数据 类似于computed
-    getters:{
-        doubleCount(state) {
-            return state.count * 2;
-        }
-    },
-    mutations:{
-
-    },
-    actions:{
-
-    },
+    // state:{
+    //     userName:"图图",
+    //     age: 3,
+    //     count: 10
+    // },
+    // // 数据缓存、只读 相当于state的派生数据 类似于computed
+    // getters:{
+    //     doubleCount(state) {
+    //         return state.count * 2;
+    //     }
+    // },
+    // mutations:{ 
+    //     addCount(state,payload) {
+    //         state.count += payload;
+    //     }
+    // },
+    // actions:{
+    //     asyncCount(context) {
+    //         setTimeout(()=>{
+    //             context.commit("addCount")
+    //         },2000)
+    //     }
+    // },
     modules:{
-
+        // 模块化
+        a,
+        b
     }
 })

vue/高阶/project2/src/views/Home.vue

@@ -1,40 +1,54 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="home">
-     <!-- state -->
+    <!-- state -->
     <h1>我叫{{ name1 }}</h1>
-    <h1>我叫{{ $store.state.userName }}</h1>
+    <h1>我叫{{ $store.state.a.userName }}</h1>
     <h1>我叫{{ userName }},今年{{ age }}岁</h1>
     <!-- getters -->
     <h1>数量{{ count1 }}</h1>
-    <h1>数量{{ $store.getters.doubleCount}}</h1>
+    <h1>数量{{ $store.getters['a/doubleCount'] }}</h1>
     <h1>数量{{ doubleCount }}</h1>
+    <button @click="changeCount">增加</button>
   </div>
 </template>
 
 <script>
-import { mapState,mapGetters } from 'vuex';
+import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
 export default {
-  name:"Home",
+  name: "Home",
   data() {
     return {
-      name1:"",
-      count1:""
-    }
+      name1: "",
+      count1: "",
+    };
   },
   created() {
-    this.name1 = this.$store.state.userName;
-    this.count1 = this.$store.getters.doubleCount;
-    console.log("首页",this.$store.getters.doubleCount)
+    console.log("首页", this.$store);
+    this.name1 = this.$store.state.a.userName;
+    this.count1 = this.$store.getters['a/doubleCount'];
     // console.log(mapState)
   },
-  computed:{
-    ...mapState(['userName','age']),
-    ...mapGetters(['doubleCount'])
-  }
-}
+  computed: {
+    ...mapState('a',["userName", "age"]),
+    ...mapGetters('a',["doubleCount"]),
+  },
+  methods: {
+    // ...mapMutations('a',["addCount"]), 
+    ...mapActions('a',['asyncCount']),
+    changeCount() {
+      // 异步
+      // this.$store.dispatch('a/asyncCount',2)
+      this.asyncCount(3)
+
+
+      // 同步
+      // this.addCount(10);
+      // this.$store.commit('a/addCount',20)
+    },
+  },
+};
 </script>
 
 <style>
-
 </style>