快捷導(dǎo)航

vuex mutations 同步操作方法詳解

更新時間：2023年10月02日 09:47:03 投稿：wdc

這篇文章主要介紹了vuex mutations 同步操作方法,需要的朋友可以參考下

作用：修改vuex中的state，只可以通過mutations修改

需要通過commit提交同步方法(1.只提交方法，參考實例1；2.攜帶參數(shù)提交，參考實例2)
同步方法中第一個默認(rèn)參數(shù)是state，可以通過state.xx拿取state中已經(jīng)定義好的數(shù)據(jù)

// state中定義一些初始數(shù)據(jù)用來舉例
state: {
  // 定義一個數(shù)字
  count: 0,
  // 定義一個對象
  coderyg: {
    name: 'coderyg',
    age: 25,
    height: 1.93
  },
  // 定義一個字符串
  info: 'swk'
}

實例1：修改count(只提交方法)

// App.vue
<p>{{ $store.state.count }}</p> //此時的count是0
<button @click="addCount">+</button>
<button @click="subCount">-</button>
// 提交同步
addCount() {
  this.$store.commit('increment');
},
subCount() {
  this.$store.commit('decrement');
}
// index.js
// 接收同步
increment(state) {
  state.count ++;
},
decrement(state) {
  state.count --;
}

實例2.1：攜帶參數(shù)普通方法提交

// App.vue
<p>{{ $store.state.count }}</p> //此時的count是0
<button @click="changeNum(+5)">+5</button>
<button @click="changeNum(-5)">-5</button>
// 提交同步--直接提交參數(shù)，num是一個數(shù)字
changeNum(num) {
  this.$store.commit('addNum', num);
}
// index.js
// 接收同步
addNum(state, num) {
  state.count += num;
}

實例2.2：攜帶參數(shù)對象方法提交

// App.vue
<p>{{ $store.state.count }}</p> //此時的count是0
<button @click="changeNum(+5)">+5</button>
<button @click="changeNum(-5)">-5</button>
// 提交同步--對象方式提交會以整個payload提交過去，通過payload.XX拿取提交過去的信息
changeNum(num) {
  this.$store.commit(從這開始{
    type: 'addNum',
    num
  }到這結(jié)束是payload);
}
// index.js
// 接收同步
addNum(state, payload) {
  state.count += payload.num;
}

到此這篇關(guān)于vuex mutations 同步操作方法詳解的文章就介紹到這了,更多相關(guān)vuex mutations 同步操作方法詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

一份超級詳細(xì)的Vue-cli3.0使用教程【推薦】
這篇文章主要介紹了一份超級詳細(xì)的Vue-cli3.0使用教程，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-11-11
vue v-model的用法解析
這篇文章主要介紹了v-model的基本用法解析，幫助大家更好的理解和學(xué)習(xí)vue v-model的使用方法，感興趣的朋友可以了解下
2020-10-10
VUE + OPENLAYERS實現(xiàn)實時定位功能
本系列文章介紹一個簡單的實時定位示例，基于VUE + OPENLAYERS實現(xiàn)實時定位功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2021-09-09
vue3中watch與watchEffect的區(qū)別
vue3 新增的 Composition API中的 watchEffect 和 watch都可在 setup() 函數(shù)中使用，本文重點介紹vue3中watch與watchEffect的區(qū)別，感興趣的朋友一起看看吧
2023-02-02
vue?3.0?使用ref獲取dom元素的示例
這篇文章主要介紹了vue?3.0?使用ref獲取dom元素,包括vue2.x獲取dom和vue3.0獲取單個dom，通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
Vue3全局配置axios的兩種方式總結(jié)
在實際項目開發(fā)中,幾乎每個組件中都會用到?axios?發(fā)起數(shù)據(jù)請求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
vue3.0 加載json的方法（非ajax）
這篇文章主要介紹了vue3.0 加載json的方法（非ajax），幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
2020-10-10
element-ui表單提交自動清空隱藏表單值實現(xiàn)
這篇文章主要為大家介紹了element-ui表單提交自動清空隱藏表單值實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
vue的過濾器filter實例詳解
本文通過實例代碼給大家介紹了vue的過濾器filter的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-09-09
vue安裝依賴npm install過程中報錯npm ERR! cb() nev
這篇文章主要介紹了vue安裝依賴npm install過程中報錯npm ERR! cb() never called!問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04