当前位置：首页 > news >正文

Vuex中的重要核心属性

news 2025/6/26 21:55:19

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}
});
```