this.$store.dispatch() 與 this.$store.commit()方法的區別

總的來說他們只是存取方式的不同,兩個方法都是傳值給vuex的mutation改變state

commit: 同步操作

存儲

this.$store.commit('changeValue',name)

取值

this.$store.state.changeValew

dispatch: 異步操作
存儲

this.$store.dispatch('getlista',name)

取值

this.$store.getters.getlists

案例：

login.vue
this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });//登陸成功后，重定向到首頁
            })
            .catch(() => {
              this.loading = false;
              this.getCode();
            });

@store/index.js
actions: {
    // 登錄
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
}