Vuex中的重要核心属性

Vuex 是一个专为 Vue.js
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 的核心属性包括：

1. State:

   • State 是 Vuex 存储数据的地方，类似于组件中的 data。它是一个单一的状态树，用一个对象就包含了全部的应用层级状态。
   • 示例：

     const store = new Vuex.Store({
       state: {
         count: 0
       }
     });
     

2. Getter:

   • Getter 允许你从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。Getter 会暴露为 store.getters 对象，你可以像访问计算属性一样访问它们。
   • 示例：

     const store = new Vuex.Store({
       state: {
         todos: [
           { id: 1, text: '...', done: true },
           { id: 2, text: '...', done: false }
         ]
       },
       getters: {
         doneTodos: state => {
           return state.todos.filter(todo => todo.done);
         }
       }
     });
     

3. Mutation:

   • Mutation 是更改 Vuex 的 store 中的状态的唯一方法。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
   • 示例：

     const store = new Vuex.Store({
       state: {
         count: 1
       },
       mutations: {
         increment (state) {
           state.count++;
         }
       }
     });
     

4. Action:

   • Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。
   • 示例：

     const store = new Vuex.Store({
       state: {
         count: 0
       },
       mutations: {
         increment (state) {
           state.count++;
         }
       },
       actions: {
         increment (context) {
           context.commit('increment');
         }
       }
     });
     

5. Module:

   • 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决这个问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。
   • 示例：

     const moduleA = {
       state: { ... },
       mutations: { ... },
       actions: { ... },
       getters: { ... }
     };
     
     const store = new Vuex.Store({
       modules: {
         a: moduleA
       }
     });
     

这些核心属性共同构成了 Vuex 的状态管理机制，使得在大型单页应用中管理状态变得更加容易和可维护。通过使用这些属性，开发者可以确保状态的变化是可预测的，并且可以轻松地追踪状态的变化。