当前位置： 面试刷题>> Vuex 的 store 有几个属性值？它们的作用分别是什么？
在Vue.js的应用开发中，Vuex作为状态管理模式和库，扮演着至关重要的角色，它集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的store是状态管理的核心，它包含了几个关键的属性，这些属性共同协作，使得状态管理变得既高效又清晰。
### Vuex Store的主要属性值
1. **state**
- **作用**：`state`是Vuex中用于存储应用状态的对象。它类似于组件的`data`属性，但它是全局的，可以在应用的任何组件中通过访问store来获取或修改这些状态。
- **示例**：
```javascript
const store = new Vuex.Store({
state: {
count: 0
}
});
```
在这个例子中，`count`就是存储在state中的一个状态。
2. **getters**
- **作用**：`getters`类似于组件中的计算属性，用于从state中派生出一些状态，例如对列表进行过滤并计数。Getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会重新计算。
- **示例**：
```javascript
getters: {
doneTodosCount: state => {
return state.todos.filter(todo => todo.done).length;
}
}
```
这个getters示例中，`doneTodosCount`根据`todos`状态中的完成项来计算完成任务的总数。
3. **mutations**
- **作用**：`mutations`是更改Vuex中state的唯一途径。Vuex中的mutation必须同步执行，这是为了追踪状态变化的历史，便于调试和回滚。
- **示例**：
```javascript
mutations: {
increment (state) {
state.count++
}
}
```
在这个例子中，`increment`是一个mutation，用于将`state.count`的值加1。
4. **actions**
- **作用**：`actions`类似于mutations，不同之处在于actions可以包含任意异步操作，并且可以提交mutation。在actions中，你可以执行异步操作（如API调用），并在操作完成后提交mutation来更新状态。
- **示例**：
```javascript
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.otherCount) % 2 === 1) {
commit('increment')
}
},
async fetchData({ commit }) {
const data = await fetch(/* some URL */);
commit('setData', data);
}
}
```
在这个例子中，`incrementIfOddOnRootSum`是一个action，它根据特定条件（当前state的`count`与根store中`otherCount`的和为奇数）来提交`increment`mutation。`fetchData`则是一个异步action，它从某个URL获取数据，并在获取成功后提交`setData`mutation来更新状态。
5. **modules**
- **作用**：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决这个问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
- **示例**（简单模块结构）：
```javascript
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA
}
})
```
在这个例子中，我们定义了一个名为`moduleA`的模块，并将其作为`modules`对象的一个属性添加到store中。这样，我们就可以在`moduleA`中管理一组相关的状态、mutations、actions和getters，从而保持应用的模块化和可维护性。
综上所述，Vuex的store通过state、getters、mutations、actions和modules这几个属性，提供了一个强大且灵活的状态管理解决方案。每个属性都有其特定的作用和用法，共同协作以实现应用状态的集中管理和高效更新。在开发Vue.js应用时，合理利用Vuex的这些特性，可以显著提升应用的可维护性和可扩展性。