vuex中actions和mutations区别

定义: 在Vuex中，actions和mutations是两个核心概念，用于管理应用程序状态的变化。

一: Mutations

mutations是用于修改Vuex状态的唯一方法。它们是同步操作，意味着它们必须是纯函数，以确保状态的可预测性。这意味着mutations应该只用于同步操作，例如在响应用户事件时更新状态。它们不应该包含任何异步代码，如API调用。

举个例子，下面的代码演示了如何定义一个名为increment的mutation，用于将state中的count属性增加

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})

store.commit('increment') // 调用mutation
1
2
3
4
5
6
7
8
9
10
11
12
13
二:Actions

actions用于执行异步操作或包含异步操作的操作序列。它们可以包含任何异步代码，例如API调用或其他异步操作，但不能直接修改状态。相反，它们通过commit触发mutations来间接修改状态。

举个例子，下面的代码演示了如何定义一个名为fetchData的action，它会异步获取数据并提交mutation来更新状态：

const store = new Vuex.Store({
state: {
data: null
},
mutations: {
setData(state, data) {
state.data = data
}
},
actions: {
async fetchData({ commit }) {
const response = await fetch('https://api.example.com/data')
const data = await response.json()
commit('setData', data)
}
}
})

store.dispatch('fetchData') // 调用action
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
总之，mutations和actions有不同的角色和职责。mutations用于同步状态的修改，actions用于执行异步操作并间接修改状态。
————————————————
版权声明：本文为CSDN博主「JoinMao」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_56960330/article/details/129420007