vuex中store.commit和store.dispatch的區(qū)別及使用方法
更新時(shí)間：2023年01月10日 10:12:49 作者：longzhoufeng
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
store.commit和store.dispatch的區(qū)別及使用
代碼示例：
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 ，可用于讀取用戶信息寫(xiě)到緩存里
this.$store.commit('loginStatus', 1);this.$store.dispatch() 與 this.$store.commit()
傳值給vuex的mutation改變state
commit: 同步操作
- 存儲(chǔ)
this.$store.commit('changeValue',name)- 取值
this.$store.state.changeValue
dispatch: 異步操作
- 存儲(chǔ)
this.$store.dispatch('getlists',name)- 取值
this.$store.getters.getlists
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說(shuō)明
- vuex中this.$store.commit和this.$store.dispatch的基本用法實(shí)例
- vuex中store存儲(chǔ)store.commit和store.dispatch的區(qū)別及說(shuō)明
- Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別說(shuō)明
- vuex中store存儲(chǔ)store.commit和store.dispatch的用法
- 在Vuex使用dispatch和commit來(lái)調(diào)用mutations的區(qū)別詳解
- Vue中commit和dispatch區(qū)別及用法辨析(最新)
相關(guān)文章
在 Vue 3 中,一個(gè)重要的特性是 watch 選項(xiàng),它允許開(kāi)發(fā)者對(duì)數(shù)據(jù)變化進(jìn)行觀察,本篇博客將詳細(xì)介紹如何在 Vue 3 中使用 watch 進(jìn)行深度觀察,特別是在使用 setup 語(yǔ)法糖時(shí),需要的朋友可以參考下2024-11-11
vue實(shí)現(xiàn)圖片加載完成前的loading組件方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)圖片加載完成前的loading組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
今天小編就為大家分享一篇Vue中的v-for指令不起效果的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
如何巧用Vue.extend繼承組件實(shí)現(xiàn)el-table雙擊可編輯(不使用v-if、v-else)
這篇文章主要給大家介紹了關(guān)于如何巧用Vue.extend繼承組件實(shí)現(xiàn)el-table雙擊可編輯的相關(guān)資料,不使用v-if、v-else,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
詳解vue.js移動(dòng)端導(dǎo)航navigationbar的封裝
本篇文章主要介紹了vue.js移動(dòng)端導(dǎo)航navigationbar的封裝，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
vue鼠標(biāo)懸停事件監(jiān)聽(tīng)實(shí)現(xiàn)方法
頁(yè)面在鼠標(biāo)懸停(不動(dòng))n秒之后,頁(yè)面進(jìn)行相應(yīng)的事件,下面這篇文章主要給大家介紹了關(guān)于vue鼠標(biāo)懸停事件監(jiān)聽(tīng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)單點(diǎn)登錄的方式匯總
最近項(xiàng)目停工了，RageFrame的學(xué)習(xí)暫時(shí)告一段落，這一篇給大家分享下有關(guān)單點(diǎn)登錄的相關(guān)知識(shí)，并提供一些demo給大家參考，對(duì)vue單點(diǎn)登錄的實(shí)現(xiàn)方式感興趣的朋友一起看看吧2021-11-11
這篇文章主要介紹了vue中$router和$route的區(qū)別，對(duì)vue感興趣的同學(xué)，一定要看下2021-05-05
作為使用Vue的開(kāi)發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、等，同時(shí)Vue也為開(kāi)發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫(xiě)代碼的效率，讓我們可以節(jié)省時(shí)間開(kāi)心的摸魚(yú)2023-03-03
Vue移動(dòng)端下拉加載更多數(shù)據(jù)onload實(shí)現(xiàn)方法淺析
這篇文章主要介紹了Vue移動(dòng)端下拉加載更多數(shù)據(jù)onload實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02