vuex中store的action和mutations用法

更新時間：2022年04月12日 11:40:37 作者：zb0002011

這篇文章主要介紹了vuex中store的action和mutations用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

action和mutations (this.$store.dispatch和this.$store.commit)區(qū)別

都是調(diào)用vuex中的方法。一個異步一個同步

dispatch：含有異步操作，例如向后臺提交數(shù)據(jù)，寫法： this.$store.dispatch('action方法名',值)
commit：同步操作，寫法：this.$store.commit('mutations方法名',值)

action:

1、用于通過提交mutation改變數(shù)據(jù)

2、會默認將自身封裝為一個Promise

3、可以包含任意的異步操作

mutations:

1、通過提交commit改變數(shù)據(jù)

2、只是一個單純的函數(shù)

3、不要使用異步操作，異步操作會導致變量不能追蹤。也就是說，用action中的函數(shù)調(diào)用mutations中的函數(shù)，進行異步操作state中的數(shù)據(jù)

用法

dispatch: 含有異步操作

存儲：

this.$store.dispatch('initUserInfo',friend);

取值：

this.$store.getters.userInfo;

commit:同步操作

存儲：

this.$store.commit('initUserInfo',friend);

取值：

this.$store.state.userInfo;

實例

1、login.vue

2、user.js

3、login.js

action和mutation分別用來處理什么？

action處理異步數(shù)據(jù)最終提交到數(shù)據(jù)庫
mutation用來同步數(shù)據(jù)做業(yè)務的處理 (vuex中store數(shù)據(jù)改變唯一的方法就是mutation)
Action提交的是 mutation，而不是直接變更狀態(tài)。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue使用自定義事件的表單輸入組件用法詳解【日期組件與貨幣組件】
這篇文章主要介紹了vue使用自定義事件的表單輸入組件用法,結(jié)合實例形式詳細分析了vue.js日期組件與貨幣組件相關操作技巧及注意事項,需要的朋友可以參考下
2020-06-06
vant van-list下拉加載更多onload事件問題
這篇文章主要介紹了vant van-list下拉加載更多onload事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue 跳轉(zhuǎn)到其他頁面并關閉當前頁面的實現(xiàn)代碼
我在做一個調(diào)用虛擬機錄屏的一個操作,需要在瀏覽器頁面上,點擊按鈕后,關閉當前頁面里的某一個頁面,并且打開瀏覽器新頁面是虛擬機的頁面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁面并關閉當前頁面的實現(xiàn)代碼,感興趣的朋友一起看看吧
2023-09-09
vue使用高德地圖根據(jù)坐標定位點的實現(xiàn)代碼
這篇文章主要介紹了vue使用高德地圖根據(jù)坐標定位點的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-08-08
vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面實現(xiàn)方法
這篇文章主要給大家介紹了關于vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-08-08
從0到1搭建Element的后臺框架的方法步驟
這篇文章主要介紹了從0到1搭建Element的后臺框架的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
vue實現(xiàn)文字滾動效果
這篇文章主要為大家詳細介紹了vue實現(xiàn)文字滾動效果，公告滾動播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue?@tap事件之$event用法介紹
這篇文章主要介紹了vue?@tap事件之$event用法介紹，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue3項目中優(yōu)雅實現(xiàn)微信授權登錄的方法
用戶在微信端中訪問第三方網(wǎng)頁,可以通過微信網(wǎng)頁授權機制獲取用戶的基本信息,進而實現(xiàn)所需要的業(yè)務邏輯,這篇文章主要給大家介紹了關于Vue3項目中優(yōu)雅實現(xiàn)微信授權登錄的相關資料,需要的朋友可以參考下
2021-09-09
vue實現(xiàn)鼠標經(jīng)過顯示懸浮框效果
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標經(jīng)過顯示懸浮框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03