快捷導(dǎo)航

vuex mutations 同步操作方法詳解

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

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

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

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

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

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

// App.vue
<p>{{ $store.state.count }}</p> //此時(shí)的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 --;
}

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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