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)文章
關(guān)于Element Loading的全局使用(自定義Loading)
這篇文章主要介紹了關(guān)于Element Loading的全局使用(自定義Loading),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue Tooltip提示動(dòng)態(tài)換行問(wèn)題
這篇文章主要介紹了vue Tooltip提示動(dòng)態(tài)換行問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05
Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法大全
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法的相關(guān)資料,文中通過(guò)圖文將解決的過(guò)程介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue內(nèi)置組件Transition的詳解,簡(jiǎn)單地說(shuō)，就是當(dāng)元素發(fā)生變化，比如消失、顯示時(shí)，添加動(dòng)畫(huà)讓它更自然過(guò)渡，它是vue內(nèi)置組件，不需要引入注冊(cè)就可以直接使用，本文通過(guò)實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
Vue實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加行的表格步驟詳解
在Vue組件中定義表格的數(shù)據(jù)模型,通常使用一個(gè)數(shù)組來(lái)存儲(chǔ)表格的數(shù)據(jù),每一行數(shù)據(jù)可以是一個(gè)對(duì)象,對(duì)象的屬性對(duì)應(yīng)表格的列,這篇文章主要介紹了Vue實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加行的表格步驟詳解,需要的朋友可以參考下2024-05-05
Vue路由跳轉(zhuǎn)與接收參數(shù)的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue路由跳轉(zhuǎn)與接收參數(shù)的實(shí)現(xiàn)方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了vue-resize深度解讀，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue3中watch和watchEffect實(shí)戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實(shí)戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽(tīng)器，但是在寫(xiě)法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下2022-07-07