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 的状态管理机制，使得在大型单页应用中管理状态变得更加容易和可维护。通过使用这些属性，开发者可以确保状态的变化是可预测的，并且可以轻松地追踪状态的变化。