Vue中commit和dispatch區(qū)別及其用法辨析

在Vue中，commit和dispatch是兩個用于觸發(fā) Vuex store 中的 mutations 和 actions 的方法。

區(qū)別

commit: 用于觸發(fā) mutations，即直接修改 state 的同步操作。通過commit方法可以調(diào)用 store 中的 mutations，并且只能同步地執(zhí)行。使用方式如下：

this.$store.commit('mutationName', payload);

dispatch: 用于觸發(fā) actions，即執(zhí)行異步操作或者復雜的邏輯處理。通過dispatch方法可以調(diào)用 store 中的 actions，并且可以是異步的。使用方式如下：

this.$store.dispatch('actionName', payload);

辨析：

• 當需要修改 state 時，應該使用commit來調(diào)用 mutations。
• 當需要進行異步操作、例如發(fā)送網(wǎng)絡請求、多個 mutations 之間有依賴關系等情況，應該使用dispatch來調(diào)用 actions。

總結

commit用于同步操作，主要用來修改 state；dispatch用于異步操作，主要用來執(zhí)行一系列的操作，包括觸發(fā)多個 mutations 或者其他一些異步操作。

異步操作：從云端拉取信息后才會執(zhí)行,放在actions中

同步操作：放在mutations中

擴展：前端vuex中dispatch的使用

提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

前言

Vuex中dispatch的用法！

一、vuex和this.$store.dispatch是什么？

Vuex: Vuex是專為Vue.js應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。
this.$store.dispatch: this.$store.dispatch是用于觸發(fā)vuex中action的方法。

二、使用方法

#基礎用法
this.$store.dispatch('actionName');

#實際案例(登錄)

this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
  this.$router.push({ path: '/' }); //登錄成功之后重定向到首頁
}).catch(err => {
  this.$message.error(err); //登錄失敗提示錯誤
});

action:

LoginByUsername({ commit }, userInfo) {
  const username = userInfo.username.trim()
  return new Promise((resolve, reject) => {
    loginByUsername(username, userInfo.password).then(response => {
      const data = response.data
      Cookies.set('Token', response.data.token) //登錄成功后將token存儲在cookie之中
      commit('SET_TOKEN', data.token)
      resolve()
    }).catch(error => {
      reject(error)
    });
  });
}

總結

Vuex是專為Vue.js應用程序開發(fā)的狀態(tài)管理模式。
this.$store.dispatch是用于觸發(fā)vuex中action的方法。

到此這篇關于Vue中commit和dispatch區(qū)別及其用法辨析的文章就介紹到這了,更多相關Vue中commit和dispatch內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論