快捷導(dǎo)航

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

更新時(shí)間：2024年06月14日 09:59:32 作者：m0_59519985

在Vue中,commit和dispatch是兩個(gè)用于觸發(fā)Vuex store中的mutations和actions的方法,這篇文章主要介紹了Vue中commit和dispatch區(qū)別及其用法辨析,需要的朋友可以參考下

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

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

區(qū)別

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

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

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

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

辨析：

當(dāng)需要修改 state 時(shí)，應(yīng)該使用commit來(lái)調(diào)用 mutations。
當(dāng)需要進(jìn)行異步操作、例如發(fā)送網(wǎng)絡(luò)請(qǐng)求、多個(gè) mutations 之間有依賴(lài)關(guān)系等情況，應(yīng)該使用dispatch來(lái)調(diào)用 actions。

總結(jié)

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

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

同步操作：放在mutations中

擴(kuò)展：前端vuex中dispatch的使用

提示：文章寫(xiě)完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔

前言

Vuex中dispatch的用法！

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

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

二、使用方法

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

#實(shí)際案例(登錄)

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

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存儲(chǔ)在cookie之中
      commit('SET_TOKEN', data.token)
      resolve()
    }).catch(error => {
      reject(error)
    });
  });
}

總結(jié)

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

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

您可能感興趣的文章: