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