feat[ptr]: 通过 vuex 进行共享数据管理

mutations 方法中不允许副作用操作
通过在 actions 中 dispatch 实现副作用操作

Author: ceilf6

Vue2/sandboxs/package-lock.json

@@ -20,15 +20,16 @@
     "test:TreeListMenu": "vue serve ./src/components/TreeListMenu/test.vue",
     "test:ListKey": "vue serve ./test/ListKey.vue",
     "test:LoadingButton": "vue serve ./src/components/LoadingButton/test.vue",
-    "test:v-model":"vue serve ./test/v-model.vue"
+    "test:v-model": "vue serve ./test/v-model.vue"
   },
   "dependencies": {
     "axios": "^1.13.4",
     "core-js": "^3.6.5",
     "mockjs": "^1.1.0",
     "querystring": "^0.2.1",
     "vue": "^2.6.11",
-    "vue-router": "^3.6.5"
+    "vue-router": "^3.6.5",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.8",

Vue2/sandboxs/package.json

@@ -14,7 +14,10 @@ import { vLoading, vLazy } from './directives'
 Vue.directive("loading", vLoading)
 Vue.directive('lazy', vLazy)
 
+import store from './store'
+
 new Vue({
+  store, // 注册 vuex 数据仓库
   router: router,
   render: h => h(App),
 }).$mount('#app')

Vue2/sandboxs/src/main.js

@@ -0,0 +1,52 @@
+// 数据仓库模块
+import Vuex from 'vuex'
+import Vue from 'vue'
+Vue.use(Vuex); // 注册 Vuex 插件到 Vue 中
+
+import { delay } from '@/utils' // utils 是具名导出的
+
+const store = new Vuex.Store({
+    // 仓库配置对象
+    state: {
+        count: 0
+    },
+    mutations: { // 配置状态变更方法：监控状态变更
+        increase(state) { // state 是默认参数，自动将当前状态传入
+            state.count++; // 增加方法：在当前状态count+1
+        },
+        decrease(state) {
+            state.count--;
+        },
+        power(state, payload) { // payload 负载，存储调用状态变更方法的额外数据
+            // payload 为 幂次
+            state.count = state.count ** payload
+        },
+        /*
+        mutations 方法中不允许副作用操作
+        因为 vuex 会在受到 commit 运行对应 mutation 方法之后立即记录状态，并不会等待事件循环运行副作用方法结束
+        */
+        // sync(state){
+        //     setTimeout(() => {
+        //         state.count++;
+        //     },1000)
+        // }
+    },
+    actions: {
+        // 通过 actions 专门处理异步
+        // 通过 dispatch 即 调用commit 实现
+        async asyncIncrease(ctx) {
+            await delay(1000)
+            ctx.commit("increase")
+        },
+        async asyncDecrease(ctx) {
+            await delay(1000)
+            ctx.commit("decrease")
+        },
+        async asyncPower(ctx, payload) {
+            await delay(1000)
+            ctx.commit("power", payload)
+        }
+    }
+})
+
+export default store

Vue2/sandboxs/src/store/index.js

@@ -0,0 +1,7 @@
+export default function delay(duration) {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve();
+        }, duration);
+    });
+}

Vue2/sandboxs/src/utils/delay.js

@@ -1,3 +1,4 @@
 export { default as toast } from './toast';
 export { default as getComponentRootDom } from './getComponentRootDom';
-export { default as formatDate } from './formatDate'
+export { default as formatDate } from './formatDate'
+export { default as delay } from './delay'

Vue2/sandboxs/src/utils/index.js

@@ -1,7 +1,19 @@
 <template>
-  <h1>About ceilf6</h1>
+  <div class="container">
+    <h1>About ceilf6</h1>
+    <A />
+    <B />
+  </div>
 </template>
 
 <script>
-export default {};
+import A from "../../../test/A.vue";
+import B from "../../../test/B.vue";
+
+export default {
+  components: {
+    A,
+    B,
+  },
+};
 </script>

Vue2/sandboxs/src/views/About/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="block">
+    <p>the number is</p>
+    <h1>{{ $store.state.count }}</h1>
+    <!-- Vuex 配置后注册到了全局所有组件实例的 $store 属性中 -->
+    <p>
+      <button @click="handleDecrease">减少</button>
+      <button @click="handleAsyncIncrease">异步增加</button>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleDecrease() {
+      this.$store.commit("decrease");
+    },
+    handleAsyncIncrease() {
+      this.$store.dispatch("asyncIncrease");
+    },
+  },
+};
+</script>

Vue2/sandboxs/test/A.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="block">
+    <p>the number is</p>
+    <h1>{{ $store.state.count }}</h1>
+    <p>
+      <button @click="handleAsyncDecrease">异步减少</button>
+      <button @click="handleIncrease">增加</button>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleIncrease() {
+      this.$store.commit("increase");
+    },
+    handleAsyncDecrease() {
+      this.$store.dispatch("asyncDecrease");
+    },
+  },
+};
+</script>
+