When I first came into contact with Vuex, I was very troubled by dispatch and commit. I didn’t know when to use dispatch to dispatch actions, and when to commit directly. Let’s just talk about two situations that are actually used in the project today.
1. The role and difference between dispatch and commit
The same point: Both are ultimately used to submit mutations to change the value of the state.
The difference: dispacth is used for asynchronous operations to modify the state, and commit is used for synchronous operations to modify the state
. Asynchronously modify state, what is synchronously modify state
Don't worry, look at the case first
2. Modify state asynchronously
Let’s look at a scene first. There is a default user information userInfo in the state. We define a mutation and an action to modify it.
const state={
userInfo{
name:"Tom",
age:"13"
}
}
const mutations={
//更新用户信息的mutation
SET_USER_INFO:(state,newUserInfo)=>{
state.userInfo=newUserInfo
}
}
const actions={
//用于提交mutation的action
changeUserInfo({
commit},data){
commit('SET_USER_INFO',data)
}
}
Get the latest userInfo in getters
const getters = {
userInfo: state => state.userInfo,
}
export default getters
Then, in the user.vue file, let's update the userInfo in the state asynchronously. How to update it asynchronously? That is, the value we want to update is obtained by calling the backend interface.
import {
getUserInfo} from "api"
export default {
name: 'User',
computed:{
userInfo(){
return this.$store.getters.userInfo; //第三步：使用getters获取最新的userInfo
}
},
methods:{
reqUserInfo(){
//第一步：调用后端接口，获取用户信息
getUserInfo()
.then((res)=>{
let data=res.data.userInfo;
//第二步：将异步拿到的用户信息，使用disptch派发action，action提交mutation更新state的值
this.$store.dispatch('changeUserInfo',data)
})
.catch((err)=>{
console.log(err)
})
}
}
}
Seeing this, I still don’t see the difference, don’t worry, keep watching.
3. Modify state synchronously
The same code, we modify it synchronously, what is synchronous, is the value we want to update, not obtained by calling the back-end interface
export default {
name: 'User',
computed:{
userInfo(){
return this.$store.state.userInfo; //第三步：直接拿到state中的userInfo
}
},
methods:{
//第一步：生成用户信息
const data={
name:"Tom",
age:"13"
}
//第二步：使用commit提交mutation来更新state
this.$store.commit('SET_USER_INFO',data)
}
}
I believe everyone can see the difference. Essentially, commit is used to submit mutations to modify the state. The difference between asynchronous and synchronous updates is that asynchronous updates must update mutations by dispatching actions, while synchronous updates can directly submit mutations to update states.
Of course, synchronous updates can also use the method of dispatching actions, because Vue officially recommends this approach.
However, asynchronous updates can only enable users to dispatch actions.
4. Summarize
The difference between commit and dispatch is that commit is a synchronous operation that submits mutations, and dispatch is an asynchronous operation that distributes actions.
Actions cannot directly modify the state value.
Actions must submit mutations to update the state
. Only mutations can update the state.
this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)
this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值)
commit: 同步操作
存储 this.$store.commit('changeValue',name)
取值 this.$store.state.changeValue
dispatch: 异步操作
存储 this.$store.dispatch('getlists',name)
取值 this.$store.getters.getlists
Author: Qingfengyemid
Link: Original Author
Source: Rare Earth Nuggets
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, for non-commercial reprint, please indicate the source.