前端vuex中dispatch的使用方法總結(jié)
前言
Vuex中dispatch的用法！
一、vuex和this.$store.dispatch是什么？
Vuex: Vuex是專為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)
});
});
}
附：dispatch和commit的作用和區(qū)別
相同點(diǎn)：二者最終都是用來(lái)提交mutation來(lái)更改state的值的
不同點(diǎn)：dispacth用于異步操作修改state,commit用于同步操作來(lái)修改state
總結(jié)
Vuex是專為Vue.js應(yīng)用程序開(kāi)發(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)文章
文章主要介紹了父子傳值、兄弟傳值和provide/inject三種在Vue中進(jìn)行組件間通信的方法,感興趣的朋友跟隨小編一起看看吧2025-03-03
詳解HTTP4種方法(GET、POST、 PUT和DELETE)
本文介紹了HTTP協(xié)議中的四種方法：GET、POST、PUT和DELETE,分別用于不同的操作,GET用于獲取數(shù)據(jù),POST用于提交數(shù)據(jù),PUT用于創(chuàng)建或更新資源,DELETE用于刪除資源,每種方法都有其特點(diǎn)和適用場(chǎng)景,了解這些方法有助于更好地進(jìn)行數(shù)據(jù)交互和開(kāi)發(fā),感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了Element Dropdown下拉菜單的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化的教程
所謂數(shù)據(jù)可視化，我們可以理解為從宏觀角度來(lái)看一眼就能看出來(lái)整個(gè)數(shù)據(jù)的占比，走向，對(duì)于數(shù)據(jù)可視化，很多互聯(lián)網(wǎng)公司是很看重這一塊的，包括大廠，本就將給大家介紹如何通過(guò)Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化2023-06-06
這篇文章主要介紹了Vue3文件拖拽上傳功能,支持拖拽到此區(qū)域上傳，支持選擇多個(gè)文件/文件夾，代碼很簡(jiǎn)單，對(duì)vue3拖拽上傳功能感興趣的朋友一起看看吧2022-10-10
Vue2/3?登錄后用戶無(wú)操作半小時(shí)后自動(dòng)清除登錄信息退出登錄下線(示例代碼)
這篇文章主要介紹了Vue2/3?登錄后用戶無(wú)操作半小時(shí)后自動(dòng)清除登錄信息退出登錄下線,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
文章介紹如何在前端開(kāi)發(fā)中配置多個(gè)代理進(jìn)行本地mock,以便同時(shí)處理開(kāi)發(fā)完成和未開(kāi)發(fā)完成的接口,主要步驟包括修改`.env.development`文件,創(chuàng)建并配置`request-mock.js`文件,以及在`vite.config.js/ts`中添加代理配置2025-12-12
本篇文章主要介紹了vue引入swiper插件的使用實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
整理項(xiàng)目中vue.config.js打包優(yōu)化配置方法
這篇文章主要介紹了整理項(xiàng)目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
vue跳轉(zhuǎn)頁(yè)面打開(kāi)新窗口,并攜帶與接收參數(shù)方式
這篇文章主要介紹了vue跳轉(zhuǎn)頁(yè)面打開(kāi)新窗口，并攜帶與接收參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04