首页 » 前端

Vuex中dispacth和commit的作用、区别以及使用方法

   发表于:前端评论 (0)   热度:1040

一开始接触Vuex的时候,被dispatch和commit搞得很是头疼,不知道什么时候需要使用dispacth派发action,什么时可以直接commit。索性今天借着项目里真实用到的2种情况来说一下。

1.dispatch和commit的作用和区别

  • 相同点:二者最终都是用来提交mutation来更改state的值的
  • 不同点:dispacth用于异步操作修改state,commit用于同步操作来修改state 说到这里,就开水抓狂了,到底什么是异步修改state,什么是同步修改state

别急,先看案例

2.异步修改state

先看一个场景,state里面有一个默认的用户信息userInfo,我们定义一个mutation和一个action用于修改它

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)
    }

}

在getters中拿到最新的userInfo

const getters = {
  userInfo: state => state.userInfo,

}
export default getters

然后,在user.vue这个文件中,我们来异步更新state中的userInfo,如何异步更新呢?就是我们要更新的值是通过调用后端接口拿来的。

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)
           })
           
      }
  }	
    	
}

看到这里,还是没看出区别是不是,别急,继续看。

3.同步修改state

同样的代码,我们同步修改,何为同步,就是我们要更新的值,不是通过调用后端接口拿到的


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)
  }	  	
}

相信大家也看出区别了,本质上,最终都是使用commit提交mutation来修改state,异步和同步的区别在于异步更新必须通过派发action来更新mutation,而同步更新可以直接提交mutation来更新state.

当然,同步更新也可以使用派发action的方式,因为vue官方推荐这种做法 但是,异步更新只能使用户派发action的方式

4.总结

  • action不能直接修改state值
  • action 必须通过提交mutation来更新state
  • 只有mutation才能更新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

 

(。・v・。)
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。