Vue唯一可以更改vuex實例中state數(shù)據(jù)狀態(tài)的屬性對象Mutation的講解
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。
Vuex 中的 mutation 非常類似于事件：
每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(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，你需要以相應的 type（事件） 調(diào)用 store.commit 方法。
<template>
<div>
<h2>我是第三個頁面</h2>
<!-- 直接在HTML標簽中使用 -->
<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ù)的形式進行賦值
mounted(){
this.goodsListHalv = this.$store.state.goodsList
},
*/
// 通過計算屬性的方式，是完美的
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ù)，進而改變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í)行過程是：按鈕點擊–>執(zhí)行組件中按鈕點擊事件方法–>執(zhí)行$store.commit('vuex中mutatioms對象中對應的函數(shù)名',需要傳遞的參數(shù))–>執(zhí)行mutations里面對應的方法–>修改state里面對應的數(shù)據(jù)–>頁面渲染。
Mutation 需遵守 Vue 的響應規(guī)則
既然 Vuex 的 store 中的狀態(tài)是響應式的，那么當我們變更狀態(tài)時，監(jiān)視狀態(tài)的 Vue 組件也會自動更新。這也意味著 Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項：
最好提前在你的 store 中初始化好所有所需屬性。當需要在對象上添加新屬性時，你應該使用 Vue.set(obj, 'newProp', 123), 或者以新對象替換老對象。例如，利用 stage-3 的對象展開運算符我們可以這樣寫：
state.obj = { ...state.obj, newProp: 123 }
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關內(nèi)容請查看下面相關鏈接
相關文章
Vue+Java+Base64實現(xiàn)條碼解析的示例
這篇文章主要介紹了Vue+Java+Base64實現(xiàn)條碼解析的示例，幫助大家實現(xiàn)條碼解析，感興趣的朋友可以了解下2020-09-09
Vue.js組件props數(shù)據(jù)驗證實現(xiàn)詳解
這篇文章主要為大家詳細介紹了Vue.js組件props數(shù)據(jù)驗證的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue Element-ui表格實現(xiàn)樹形結構表格
這篇文章主要為大家詳細介紹了vue Element-ui表格實現(xiàn)樹形結構表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue3中的createApp分析,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue3+vite使用環(huán)境變量.env的一些配置情況詳細說明
開發(fā)中經(jīng)常會使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關于vue3+vite使用環(huán)境變量.env的一些配置情況說明的相關資料,需要的朋友可以參考下2022-12-12
解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題
這篇文章主要介紹了解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車完整功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了Vue中的計算屬性和axios基本使用回顧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue中如何更改element-ui主題色，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
.sync?修飾符所提供的功能,當一個子組件改變了一個prop的值時,這個變化也會同步到父組件中所綁定,下面這篇文章主要給大家介紹了關于Vue中子組件向父組件傳值以及.sync修飾符的相關資料,需要的朋友可以參考下2022-11-11