Vuex---dispatch 和 commit 的区别与使用

区别:

1.Action提交的是mutation,而不是直接变更状态,可以包含任意的异步操作。
2.dispatch推送一个action。

说实话,官网看的感觉不是很懂。还是先说明这两个函数调用的都是哪个里面的方法吧。

1.dispatch 异步操作 this.store.dispatch('actions的方法', arg), 调用actions里的方法。 2.commit 同步操作 this.store.commit('mutations的方法', arg),调用mutations里的方法。

使用方法步骤:

const user = {
  state: {
    token: ''
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token ="test " +token 
    },
  },
  actions: {
    // 登录
    Login({commit}, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo.account, userInfo.password).then(aa => {
          if(aa.status==200){
            const tokenSuccess = aa.data.token.tokenValue
            commit('SET_TOKEN', tokenSuccess )
            document.cookie=`cookie地址`;
            token="test"+tokenSuccess ;
            //setToken("test" +token)
            resolve();
          }
          
        }).catch(error => {
          console.log("登录失败")
          reject(error)
        })
      })
    },
  }
}
toLogin() {
            this.$store.dispatch('Login',arg).then(() => {
               
            })

在上面代码中,在mutations中使用箭头函数更改state中的token数据。然后在actions中Login函数中通过commit('SET_TOKEN', tokenSuccess )来进行调用此函数并传参,才能在store存储成功。在需要的组件中使用this.$store.dispatch('actions方法')来调取store里的对应方法,从而更新。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,964评论 0 7
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 740评论 0 3
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 397评论 0 0
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,040评论 4 111
  • 目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念?||如何在组件中去使用...
    我跟你蒋阅读 4,128评论 4 51