在Vuex使用dispatch和commit來調用mutations的區(qū)別詳解
更新時間：2018年09月18日 08:51:05 作者：東邊的小山
今天小編就為大家分享一篇在Vuex使用dispatch和commit來調用mutations的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
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：含有異步操作，例如向后臺提交數據，寫法： this.$store.dispatch('mutations方法名',值)
commit：同步操作，寫法：this.$store.commit('mutations方法名',值)
以上這篇在Vuex使用dispatch和commit來調用mutations的區(qū)別詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
如果你在社交媒體上停留的時間過長，那么，你所在的網站很可能正在使用無限滾動組件。這篇文章教你利用Vue3實現無限滾動組件，感興趣的可以參考一下2022-09-09
這篇文章主要介紹了vue的自定義指令傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
本文主要實現給項目的整個背景加上自定義水印，可以改變水印的文案和字體顏色等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue自定義指令的創(chuàng)建和使用方法,結合完整實例形式分析了vue.js創(chuàng)建及使用自定義指令的相關操作技巧與注意事項,需要的朋友可以參考下2018-12-12
本文主要介紹了vue封裝tree組件實現搜索功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
組件是Vue是一個可以重復使用的Vue實例, 它擁有獨一無二的組件名稱,它可以擴展HTML元素,以組件名稱的方式作為自定義的HTML標簽，這篇文章主要介紹了vue組件component的注冊與使用,需要的朋友可以參考下2022-08-08
vue3+ts項目之安裝eslint、prettier和sass的詳細過程
這篇文章主要介紹了vue3+ts項目02-安裝eslint、prettier和sass的詳細過程,在本文講解中需要注意執(zhí)行yarn format會自動格式化css、js、html、json還有markdown代碼，需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了如何在Vue項目中使用flv.js播放視頻,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
Openlayers 是一個模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包，用于顯示地圖及空間數據，并與之進行交互，具有靈活的擴展機制，本文給大家介紹vue+openlayer實現地圖聚合效果和撒點效果，感興趣的朋友一起看看吧2021-09-09
VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預約掛號步驟詳情
這篇文章主要介紹了VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預約掛號步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04