我要评论vuex的四个常用核心概念
在 vuex 中，state, getters、mutations 和 actions 是四个个核心概念，而同学们时常会搞乱其中的某些概念和用法, 这里统一讲解一下
state
首先，我们要明确 vuex 的核心概念 state。
state 是 vuex 中用于存储应用状态的对象。
这些状态是响应式的，当它们改变时，视图会自动更新。
getters
这里同学就有疑问了, vuex 的 state 明明可以直接进行访问，为什么要画蛇添足的加一个 getters 呢？
其实: getters 是用于从 state 中派生出一些状态，例如对 state 中的数据进行过滤或计算新的值。
与直接返回 state 的值相比，getter 的返回值会根据它的依赖进行缓存。
只有在相关依赖发生改变时才会重新求值。(说人话就是减少计算成本, 提高性能)
用法：
在 store 中定义 getter：
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)
}
}
})在组件中使用 getter：
computed: {
donetodos () {
return this.$store. getters. donetodos
}
}mutations
mutations 是 vuex 中用于更改 state 的唯一方法（ 记住, 是唯一的哟）。
vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
const store = new vuex.store ({
state: {
count: 0
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
在组件中提交 mutation：
javascript
methods: {
increment () {
this.$store.commit ('increment')
}
}actions
那么 actions 和 mutations 有什么区别呢?
actions 类似于 mutations，不同在于：
- action 提交的是 mutation，而不是直接变更状态。
- action 可以包含任意异步操作。
- 当需要在 state 上执行异步操作或者执行一批 mutations 时，你可以使用 actions。
用法：
在 store 中定义 action：
const store = new vuex.store ({
state: {
count: 0
},
mutations: {
increment (state) {
state. count++
}
},
actions: {
incrementasync ({ commit }) {
settimeout (() => {
commit ('increment')
}, 1000)
}
}
})在组件中分发 action：
methods: {
incrementasync () {
this.$store.dispatch('incrementasync')
}
}注意：
在 actions 中，你可以通过 context 对象来访问 commit 方法（或其他 vuex 属性）。
为了方便，我们可以直接解构 commit 出来，就像上面的例子那样。
总结
state：存储应用的状态。getters：基于 state 计算属性，并可以缓存结果。mutations：直接更改 state 的唯一方式，且必须是同步函数。actions：类似于 mutations，用于提交 mutations，可以包含任意异步操作。
这四个概念共同构成了 vuex 的核心功能，使得状态管理在 vue 应用中变得清晰、可预测和可维护。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论