Vuex 是一个专为 Vue.js
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 的核心属性包括:
-
State:
- State 是 Vuex 存储数据的地方,类似于组件中的 data。它是一个单一的状态树,用一个对象就包含了全部的应用层级状态。
- 示例:
const store = new Vuex.Store({state: {count: 0} });
-
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);}} });
-
Mutation:
- Mutation 是更改 Vuex 的 store 中的状态的唯一方法。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。
- 示例:
const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {state.count++;}} });
-
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');}} });
-
Module:
- 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决这个问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。
- 示例:
const moduleA = {state: { ... },mutations: { ... },actions: { ... },getters: { ... } };const store = new Vuex.Store({modules: {a: moduleA} });
这些核心属性共同构成了 Vuex 的状态管理机制,使得在大型单页应用中管理状态变得更加容易和可维护。通过使用这些属性,开发者可以确保状态的变化是可预测的,并且可以轻松地追踪状态的变化。