Vue唯一可以更改vuex實(shí)例中state數(shù)據(jù)狀態(tài)的屬性對象Mutation的講解
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。
Vuex 中的 mutation 非常類似于事件：
每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。mutation 必須是同步函數(shù)。
不帶載荷（只改變數(shù)據(jù)的狀態(tài)）
接前面幾篇文章的例子，這里我們修改商品價格減半。
store.js
mutations: {
//商品價格減半；更改這個數(shù)據(jù)狀態(tài)必須將這個數(shù)據(jù)源state傳遞過來
goodsPriceHalve: state => {
let goodsPriceHalve = state.goodsList.map(currentValue => {
return {
name: currentValue.name,
price: currentValue.price/2
}
})
state.goodsList = goodsPriceHalve;
}
}
page5.vue
要喚醒一個 mutation handler，你需要以相應(yīng)的 type（事件） 調(diào)用 store.commit 方法。
<template>
<div>
<h2>我是第三個頁面</h2>
<!-- 直接在HTML標(biāo)簽中使用 -->
<div>{{$store.state.goodsList}}</div>
<br>
<router-link to='/page6'>更改商品名字</router-link>
<br>
<button @click="handleGoodsHavle">商品價格減半</button>
<ul class="ul_list">
<li v-for="item in goodsListHalv">
<p class="name">商品：{{item.name}}</p>
<p class="price">價格：￥{{item.price}}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
/*
// mutations不能通過直接賦值的形式改變state的數(shù)據(jù)狀態(tài)
goodsListHalv: this.$store.state.goodsList,
*/
// goodsListHalv: []
}
},
/*
// mutations不能通過鉤子函數(shù)的形式進(jìn)行賦值
mounted(){
this.goodsListHalv = this.$store.state.goodsList
},
*/
// 通過計(jì)算屬性的方式，是完美的
computed: {
goodsListHalv(){
return this.$store.state.goodsList;
}
},
methods: {
handleGoodsHavle: function(){
//這里只通過事件改變數(shù)據(jù)的狀態(tài)
this.$store.commit('goodsPriceHalve')
}
}
}
</script>
效果圖
提交載荷（Payload）（改變數(shù)據(jù)狀態(tài)的同時傳遞參數(shù)）
參數(shù)：字符串/對象
這里修改商品名字。
store.js
// 通過組件上的事件，通過this.$store.commit('mutations中的函數(shù)','需要從組件上傳遞給 mutation中這個函數(shù)的參數(shù)')
mutations: {
// 統(tǒng)一修改商品的名稱；changeName(state,payload)參數(shù)1 state：數(shù)據(jù)源，參數(shù)2 payload：接收的參數(shù)
changeName: (state,payload) => {
var changeName = state.goodsList.map(currentValue => {
return {
name: payload,//接收參數(shù)
price: currentValue.price/2
}
})
state.goodsList = changeName;
}
}
這里的載荷payload可以是一個對象/字符串。
page6.vue
<template>
<div>
<h2>我是第四個頁面</h2>
<div>
<input type="text" placeholder="請輸入商品的新名字" v-model="inpValue">
<button @click="changeGoodsName()">商品價格減半</button>
</div>
<router-link to='/page7'>action</router-link>
<ul class="ul_list">
<li v-for="item in goodsListHalv">
<p class="name">商品：{{item.name}}</p>
<p class="price">價格：￥{{item.price}}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
inpValue:'',
}
},
computed: {
goodsListHalv(){
return this.$store.state.goodsList;
}
},
methods: {
// 通過 click事件觸發(fā)methods中的函數(shù)，進(jìn)而改變store.js中數(shù)據(jù)的狀態(tài)
changeGoodsName: function(){
// this.$store.commit('需要操作mutations中的函數(shù)名','從這個組件傳遞給第一個參數(shù)的參數(shù)')
this.$store.commit('changeName',this.inpValue)
}
}
}
</script>
這里的載荷payload就是輸入框的值。
效果圖
代碼執(zhí)行過程
上面的Mutation執(zhí)行過程是：按鈕點(diǎn)擊–>執(zhí)行組件中按鈕點(diǎn)擊事件方法–>執(zhí)行$store.commit('vuex中mutatioms對象中對應(yīng)的函數(shù)名',需要傳遞的參數(shù))–>執(zhí)行mutations里面對應(yīng)的方法–>修改state里面對應(yīng)的數(shù)據(jù)–>頁面渲染。
Mutation 需遵守 Vue 的響應(yīng)規(guī)則
既然 Vuex 的 store 中的狀態(tài)是響應(yīng)式的，那么當(dāng)我們變更狀態(tài)時，監(jiān)視狀態(tài)的 Vue 組件也會自動更新。這也意味著 Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項(xiàng)：
最好提前在你的 store 中初始化好所有所需屬性。當(dāng)需要在對象上添加新屬性時，你應(yīng)該使用 Vue.set(obj, 'newProp', 123), 或者以新對象替換老對象。例如，利用 stage-3 的對象展開運(yùn)算符我們可以這樣寫：
state.obj = { ...state.obj, newProp: 123 }
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
這篇文章主要介紹了vue前后端分離如何解決每次請求session都會變的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
在vue中獲取token,并將token寫進(jìn)header的方法
今天小編就為大家分享一篇在vue中獲取token,并將token寫進(jìn)header的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺php)
這篇文章主要介紹了Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺php)，前端采用vue框架，后臺php，具體解決方法，大家參考下本文2018-03-03
這篇文章主要介紹了Vue父組件監(jiān)聽子組件生命周期,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
Vue使用iframe實(shí)現(xiàn)瀏覽器打印兼容性優(yōu)化
在前端開發(fā)中,打印功能是一個常見的需求,但不同瀏覽器對打印樣式的支持差異較大,本文我們來看看Vue如何使用iframe實(shí)現(xiàn)瀏覽器打印兼容性優(yōu)化吧2025-04-04
vue中jsencrypt與base64加密解密的實(shí)用流程
vue項(xiàng)目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實(shí)用流程,具有一定的參考價值,感興趣的可以了解一下2023-10-10
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了詳細(xì)介紹解決vue和jsp結(jié)合的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue開發(fā)中如何在js文件里使用pinia和組件同步
在JavaScript文件中封裝涉及到使用Pinia的方法時,發(fā)現(xiàn)Pinia和組件內(nèi)容并不同步,二者的狀態(tài)是獨(dú)立的,解決辦法是,在新建對象的時候,將Pinia作為參數(shù)傳入,本文給大家介紹vue開發(fā)中如何在js文件里使用pinia和組件同步,感興趣的朋友一起看看吧2024-10-10