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 ，可用于讀取用戶(hù)信息寫(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.js中.native修飾符,給普通的HTML標(biāo)簽監(jiān)聽(tīng)一個(gè)事件，之后添加 .native 修飾符是不會(huì)起作用的。需要的朋友可以參考下2018-04-04
vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷(xiāo)毀的操作
這篇文章主要介紹了vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷(xiāo)毀的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
父組件向子組件傳值的時(shí)候,子組件是通過(guò)props來(lái)接收的,然后以變量的形式將props傳遞到setup語(yǔ)法糖果中使用,本文給大家介紹vue3 setup語(yǔ)法糖之父子組件之間的傳值,感興趣的朋友一起看看吧2023-12-12
vue中keep-alive、activated的探討和使用詳解
這篇文章主要介紹了vue中keep-alive、activated的探討和使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解
這篇文章主要為大家介紹了vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue.js實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果
這篇文章主要介紹了vue.js實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
vue使用Echarts設(shè)置數(shù)據(jù)無(wú)效問(wèn)題記錄及解決方法
這篇文章主要介紹了vue使用Echarts設(shè)置數(shù)據(jù)無(wú)效問(wèn)題記錄,本文通過(guò)場(chǎng)景分析給大家分享解決方法，需要的朋友可以參考下2022-08-08
Vue中直接操作數(shù)組索引不奏效的問(wèn)題解讀
這篇文章主要介紹了Vue中直接操作數(shù)組索引不奏效的問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09