在 vuex 中,getters 用于从状态派生数据,而 mutations 则用于修改状态。getters 常用于计算属性,而 mutations 用于同步更改状态。所有状态修改都必须通过 mutations 进行,而不应直接修改状态对象。
Vue 中 Getters 和 Mutations 的区别
Vuex 中,getters 和 mutations 是两个用于管理 Vuex 状态的关键概念。二者的区别在于:
用途
- Getters:用于从 Vuex 状态中获取派生数据或计算属性。
- Mutations:用于修改 Vuex 状态。
语法
- Getters:使用 mapGetters 辅助函数映射到组件,或者使用 $store.getters 访问。
- Mutations:使用 mapMutations 辅助函数映射到组件,或者使用 $store.commit 分发。
何时使用
- Getters:当需要从状态中计算数据时,例如总和、平均值或过滤后的列表。
- Mutations:当需要修改状态时,例如增加计数、添加项目或删除属性。
注意事项
- Getters:都是只读的,不会修改状态。
- Mutations:只能是同步的,不能执行异步操作。
- 状态修改:所有状态修改都必须通过 mutations 进行,不能直接修改状态对象。
示例
以下是一个使用 getters 和 mutations 的代码示例:
// getters.js
const getters = {
totalItems: state => state.items.length,
};
// mutations.js
const mutations = {
addItem: (state, item) => state.items.push(item),
};