在 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 应用中变得清晰、可预测和可维护。
你的点赞支持是我继续创作的动力