前端vuex中dispatch的使用方法總結(jié)
前言
Vuex中dispatch的用法！
一、vuex和this.$store.dispatch是什么？
Vuex: Vuex是專為Vue.js應(yīng)用程序開發(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)
});
});
}
附：dispatch和commit的作用和區(qū)別
相同點(diǎn)：二者最終都是用來提交mutation來更改state的值的
不同點(diǎn)：dispacth用于異步操作修改state,commit用于同步操作來修改state
總結(jié)
Vuex是專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。
this.$store.dispatch是用于觸發(fā)vuex中action的方法。
到此這篇關(guān)于前端vuex中dispatch的使用方法的文章就介紹到這了,更多相關(guān)vuex中dispatch使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中實(shí)現(xiàn)表單地區(qū)選擇與級(jí)聯(lián)聯(lián)動(dòng)示例詳解
這篇文章主要為大家介紹了Vue中實(shí)現(xiàn)表單地區(qū)選擇與級(jí)聯(lián)聯(lián)動(dòng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)手機(jī)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要和大家一起學(xué)習(xí)vue.js條件渲染，代碼注釋詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Vue.js如何獲取data-*的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
vue基于mint-ui的城市選擇3級(jí)聯(lián)動(dòng)的示例
本篇文章主要介紹了vue基于mint-ui的城市選擇3級(jí)聯(lián)動(dòng)的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了在vue中使用G2圖表的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼
在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
watch 是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會(huì)觸發(fā)回調(diào)，這項(xiàng)配置在業(yè)務(wù)中是很常用。在面試時(shí)，也是必問知識(shí)點(diǎn)，一般會(huì)用作和 computed 進(jìn)行比較。那么本文就來帶大家從源碼理解 watch 的工作流程，以及依賴收集和深度監(jiān)聽的實(shí)現(xiàn)2022-10-10