vuex中store的action和mutations用法
更新時(shí)間：2022年04月12日 11:40:37 作者：zb0002011
這篇文章主要介紹了vuex中store的action和mutations用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
action和mutations (this.$store.dispatch和this.$store.commit)區(qū)別
都是調(diào)用vuex中的方法。一個(gè)異步一個(gè)同步
dispatch：含有異步操作，例如向后臺(tái)提交數(shù)據(jù)，寫法： this.$store.dispatch('action方法名',值)commit：同步操作，寫法：this.$store.commit('mutations方法名',值)
action:
1、用于通過提交mutation改變數(shù)據(jù)
2、會(huì)默認(rèn)將自身封裝為一個(gè)Promise
3、可以包含任意的異步操作
mutations:
1、通過提交commit改變數(shù)據(jù)
2、只是一個(gè)單純的函數(shù)
3、不要使用異步操作，異步操作會(huì)導(dǎo)致變量不能追蹤。也就是說，用action中的函數(shù)調(diào)用mutations中的函數(shù)，進(jìn)行異步操作state中的數(shù)據(jù)
用法
dispatch: 含有異步操作
存儲(chǔ)：
this.$store.dispatch('initUserInfo',friend);取值：
this.$store.getters.userInfo;
commit:同步操作
存儲(chǔ)：
this.$store.commit('initUserInfo',friend);取值：
this.$store.state.userInfo;
實(shí)例
1、login.vue
2、user.js
3、login.js
action和mutation分別用來處理什么？
action處理異步數(shù)據(jù)最終提交到數(shù)據(jù)庫mutation用來同步數(shù)據(jù)做業(yè)務(wù)的處理 (vuex中store數(shù)據(jù)改變唯一的方法就是mutation)Action提交的是 mutation，而不是直接變更狀態(tài)。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用自定義事件的表單輸入組件用法詳解【日期組件與貨幣組件】
這篇文章主要介紹了vue使用自定義事件的表單輸入組件用法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js日期組件與貨幣組件相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vant van-list下拉加載更多onload事件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼
我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作,需要在瀏覽器頁面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁面里的某一個(gè)頁面,并且打開瀏覽器新頁面是虛擬機(jī)的頁面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09
vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了從0到1搭建Element的后臺(tái)框架的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文字滾動(dòng)效果，公告滾動(dòng)播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue?@tap事件之$event用法介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue3項(xiàng)目中優(yōu)雅實(shí)現(xiàn)微信授權(quán)登錄的方法
用戶在微信端中訪問第三方網(wǎng)頁,可以通過微信網(wǎng)頁授權(quán)機(jī)制獲取用戶的基本信息,進(jìn)而實(shí)現(xiàn)所需要的業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中優(yōu)雅實(shí)現(xiàn)微信授權(quán)登錄的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03