快捷導(dǎo)航

在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ù)，寫法： this.$store.dispatch('mutations方法名',值)

commit：同步操作，寫法：this.$store.commit('mutations方法名',值)

以上這篇在Vuex使用dispatch和commit來(lái)調(diào)用mutations的區(qū)別詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于Vue3實(shí)現(xiàn)無(wú)限滾動(dòng)組件的示例代碼
如果你在社交媒體上停留的時(shí)間過(guò)長(zhǎng)，那么，你所在的網(wǎng)站很可能正在使用無(wú)限滾動(dòng)組件。這篇文章教你利用Vue3實(shí)現(xiàn)無(wú)限滾動(dòng)組件，感興趣的可以參考一下
2022-09-09
vue的自定義指令傳參方式
這篇文章主要介紹了vue的自定義指令傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue使用自定義指令實(shí)現(xiàn)頁(yè)面底部加水印
本文主要實(shí)現(xiàn)給項(xiàng)目的整個(gè)背景加上自定義水印，可以改變水印的文案和字體顏色等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue自定義指令的創(chuàng)建和使用方法實(shí)例分析
這篇文章主要介紹了vue自定義指令的創(chuàng)建和使用方法,結(jié)合完整實(shí)例形式分析了vue.js創(chuàng)建及使用自定義指令的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-12-12
vue封裝tree組件實(shí)現(xiàn)搜索功能
本文主要介紹了vue封裝tree組件實(shí)現(xiàn)搜索功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue組件component的注冊(cè)與使用詳解
組件是Vue是一個(gè)可以重復(fù)使用的Vue實(shí)例, 它擁有獨(dú)一無(wú)二的組件名稱,它可以擴(kuò)展HTML元素,以組件名稱的方式作為自定義的HTML標(biāo)簽，這篇文章主要介紹了vue組件component的注冊(cè)與使用,需要的朋友可以參考下
2022-08-08
vue3+ts項(xiàng)目之安裝eslint、prettier和sass的詳細(xì)過(guò)程
這篇文章主要介紹了vue3+ts項(xiàng)目02-安裝eslint、prettier和sass的詳細(xì)過(guò)程,在本文講解中需要注意執(zhí)行yarn format會(huì)自動(dòng)格式化css、js、html、json還有markdown代碼，需要的朋友可以參考下
2023-10-10
Vue中使用flv.js播放視頻的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何在Vue項(xiàng)目中使用flv.js播放視頻,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
基于vue+openlayer實(shí)現(xiàn)地圖聚合和撒點(diǎn)效果
Openlayers 是一個(gè)模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包，用于顯示地圖及空間數(shù)據(jù)，并與之進(jìn)行交互，具有靈活的擴(kuò)展機(jī)制，本文給大家介紹vue+openlayer實(shí)現(xiàn)地圖聚合效果和撒點(diǎn)效果，感興趣的朋友一起看看吧
2021-09-09
VUE搭建分布式醫(yī)療掛號(hào)系統(tǒng)的前臺(tái)預(yù)約掛號(hào)步驟詳情
這篇文章主要介紹了VUE搭建分布式醫(yī)療掛號(hào)系統(tǒng)的前臺(tái)預(yù)約掛號(hào)步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04