在Vuex使用dispatch和commit來(lái)調(diào)用mutations的區(qū)別詳解
更新時(shí)間：2018年09月18日 08:51:05 作者：東邊的小山
今天小編就為大家分享一篇在Vuex使用dispatch和commit來(lái)調(diào)用mutations的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
main.js中
import Vuex from 'vuex'
Vue.use(vuex);
const store = new Vuex.store({
state: {
nickName: "",
cartCount: 0
},
mutations: {
updateUserInfo(state,nickName) {
state.nickName = nickName;
},
updateCartCount(state,cartCount) {
state.cartCount += cartCount;
}
},
actions: {
updateUserInfo(context) {
context.commit("updateUserInfo");
},
updateCartCount(context) {
context.commit("updateCartCount");
}
}
})
new Vue({
el: "#app",
store,
router,
template: '<App/>',
components: {App}
})
組件中：
methods: {
increment(){
this.$store.dispatch("updateUserInfo", 'nick'); //this.$store.commit("increment", 'nick');
},
decrement() {
this.$store.dispatch("updateCartCount", 1); // this.$store.commit("decrement", 1);
}
}
區(qū)別：
dispatch：含有異步操作，例如向后臺(tái)提交數(shù)據(jù)，寫(xiě)法： this.$store.dispatch('mutations方法名',值)
commit：同步操作，寫(xiě)法：this.$store.commit('mutations方法名',值)
以上這篇在Vuex使用dispatch和commit來(lái)調(diào)用mutations的區(qū)別詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)購(gòu)物車(chē)功能（商品分類(lèi)）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車(chē)功能，商品分類(lèi)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
詳解vue-resource promise兼容性問(wèn)題
這篇文章主要介紹了詳解vue-resource promise兼容性問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vue表單輸入綁定的示例代碼，本文使用v-model指令在表單input創(chuàng)建雙向數(shù)據(jù)綁定，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
vue3 reactive函數(shù)用法實(shí)戰(zhàn)教程
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法，reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11
當(dāng)遍歷一個(gè)數(shù)組或枚舉一個(gè)對(duì)象進(jìn)行迭代循環(huán)展示時(shí)，就會(huì)用到列表渲染指令 v-for。這篇文章主要介紹了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了VUE兄弟組件傳值操作,結(jié)合實(shí)例形式分析了VUE兄弟組件傳值操作的原理、步驟、實(shí)現(xiàn)方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-10-10
Vue實(shí)現(xiàn)無(wú)限級(jí)樹(shù)形選擇器
這篇文章主要介紹了Vue實(shí)現(xiàn)無(wú)限級(jí)樹(shù)形選擇器，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
vue+elementUI的select下拉框回顯為數(shù)字問(wèn)題
這篇文章主要介紹了vue+elementUI的select下拉框回顯為數(shù)字問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
最近找到幾個(gè)好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關(guān)于vue3中超好用的插件整理,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04