vuex中store存儲(chǔ)store.commit和store.dispatch的用法
代碼示例：
this.$store.commit('loginStatus', 1);
this.$store.dispatch('isLogin', true);
規(guī)范的使用方式：
// 以載荷形式
store.commit('increment'，{
amount: 10 //這是額外的參數(shù)
})
// 或者使用對(duì)象風(fēng)格的提交方式
store.commit({
type: 'increment',
amount: 10 //這是額外的參數(shù)
})
主要區(qū)別：
dispatch：含有異步操作，數(shù)據(jù)提交至 actions ，可用于向后臺(tái)提交數(shù)據(jù)
寫法示例：
this.$store.dispatch('isLogin', true);
commit：同步操作，數(shù)據(jù)提交至 mutations ，可用于登錄成功后讀取用戶信息寫到緩存里
寫法示例：
this.$store.commit('loginStatus', 1);
兩者都可以以載荷形式或者對(duì)象風(fēng)格的方式進(jìn)行提交
補(bǔ)充知識(shí)：如何獲取vuex的action的返回值（axios請(qǐng)求為例）
因?yàn)橹袄蠋熡兄v過(guò)將vuex的封裝。
今天就想嘗試寫一下，然后就封裝了。
但是我想要在vue組件里面獲取vuex的action的返回值
這里我用的dispatch調(diào)用 如圖
我這里使用的new Promise的方法
調(diào)用getlunbolist的時(shí)候返回一個(gè)new Promise，把需要的值用resolve帶出
在組件就可以用then的方法取出來(lái)使用
我只是一個(gè)小小白，我知道我的表述很生硬而且可能還不準(zhǔn)備，但是意思就是大概這個(gè)意思。而且會(huì)堅(jiān)持把我覺(jué)得有收獲的內(nèi)容下來(lái)的，希望以后成大佬了能自己來(lái)完善，當(dāng)然大佬們看到問(wèn)題了可以多多指點(diǎn)一下小弟。
以上這篇vuex中store存儲(chǔ)store.commit和store.dispatch的用法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3使用quill富文本編輯器保姆級(jí)教程(附踩坑解決)
這篇文章主要給大家介紹了關(guān)于vue3使用quill富文本編輯器保姆級(jí)教程的相關(guān)資料,在許多網(wǎng)站和應(yīng)用程序中富文本編輯器是一種常見的工具,它使用戶能夠以直觀的方式創(chuàng)建和編輯文本內(nèi)容,需要的朋友可以參考下2023-11-11
vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼
最近做了個(gè)項(xiàng)目需要做數(shù)字滾動(dòng)增加的效果，剛開始接到這個(gè)項(xiàng)目還真是懵了，后來(lái)發(fā)現(xiàn)實(shí)現(xiàn)代碼很簡(jiǎn)單的，下面小編給大家?guī)?lái)了vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼，需要的朋友參考下吧2018-07-07
Element-Plus Select組件實(shí)現(xiàn)滾動(dòng)分頁(yè)加載功能
Element-Plus的select組件并沒(méi)有自帶滾動(dòng)分頁(yè)加載的功能,其雖然提供了自定義下拉菜單的底部的方式可以自定義上一頁(yè)及下一頁(yè)操作按鈕的方式進(jìn)行分頁(yè)加載切換,這篇文章主要介紹了Element-Plus Select組件實(shí)現(xiàn)滾動(dòng)分頁(yè)加載功能,需要的朋友可以參考下2024-03-03
vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一種組件間通信的方式,它允許父組件向子組件傳遞數(shù)據(jù),而不需要通過(guò)props或事件來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue2/vue3中provide/inject的基本用法的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
如何使用 Vue Router 的 meta 屬性實(shí)現(xiàn)多種功能
在Vue.js中,Vue Router 提供了強(qiáng)大的路由管理功能,通過(guò)meta屬性,我們可以在路由定義中添加自定義元數(shù)據(jù),以實(shí)現(xiàn)訪問(wèn)控制、頁(yè)面標(biāo)題設(shè)置、角色權(quán)限管理、頁(yè)面過(guò)渡效果,本文將總結(jié)如何使用 meta 屬性來(lái)實(shí)現(xiàn)這些常見的功能,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了詳解Vue This$Store總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
VueX 提供了一個(gè)全局都可以使用的數(shù)據(jù)管理倉(cāng)庫(kù)，不用考慮父子傳值之類的問(wèn)題，并且可以跨頁(yè)面?zhèn)鬟f數(shù)據(jù)，提高了可維護(hù)性，這篇文章主要介紹了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以參考下2022-12-12
vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue組件之間通信方式實(shí)例總結(jié)【8種方式】
這篇文章主要介紹了vue組件之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js的8種組件通信方式與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02