如何在 Vue 2中使用 Vuex,组件更新

在 Vue 2 中，使用 Vuex 进行状态管理涉及以下几个关键步骤：

1. **初始化 Store**：
首先，在项目的根目录下创建一个 `store` 文件夹，然后创建一个 `index.js` 文件。引入 `vuex` 和 Vue，创建一个新的 Vuex 实例并定义 state、mutation、action 和 getter。例如：

   import Vue from 'vue';
   import Vuex from 'vuex';

   const store = new Vuex.Store({
     state: { count: 0 },
     mutations: {
       increment(state) {
         state.count++;
       }
     },
     actions: {
       async increment(context) {
         await new Promise((resolve) => setTimeout(resolve, 1000)); // 异步延迟
         context.commit('increment');
       }
     },
     getters: {
       getCount(state) {
         return state.count;
       }
     }
   });

2. **在组件中注入 store**：
在 Vue 组件的构造函数中使用 `Vue.prototype.$store = store` 注入 store 到全局作用域，以便在组件内部访问。

3. **使用 state 和 mutation**：
在组件模板中，可以通过 `{{ $store.state.count }}` 显示当前状态。当你需要更改状态时，使用 `this.$store.commit('increment')` 调用 mutation。

4. **响应式监听**：
使用 `watch` 或者 `computed` 属性来监听状态变化。例如，你可以创建一个计算属性：

   <template>
     <div>{{ message }}</div>
   </template>

   <script>
   export default {
     computed: {
       message() {
         return `$store.getters.getCount`;
       }
     }
   };
   </script>

5. **组件更新**：
当组件依赖的数据发生变化时（比如 state 更新），Vue 会检测到这种变更并触发组件的更新。Vuex 的状态更新机制保证了数据的一致性和实时性。