Vuex(四)--Vue核心概念Mutation

文章目录

1.Vuex(一)–为什么要使用Vuex

2.Vuex(二)–Vue核心概念State

3.Vuex(三)–Vue核心概念Getter

4.Vuex(四)–Vue核心概念Mutation

5.Vuex(五)–Vue核心概念Action

6.Vuex(六)–Vue核心概念Module

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。mutation 必须是同步函数。

不带载荷

接前面几篇文章的例子，这里我们修改商品价格减半。

store.js

mutations: {
// 商品价格减半
goodsPriceDiscount: state => {
var goodsPriceDiscount = state.goodsList.map(function(item){
return {
price: item.price / 2,
name: item.name
}
})
state.goodsList = goodsPriceDiscount;
}
}

Page5.vue

要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法。

methods: {
// 商品价格减半
discountPrice: function(){
this.$store.commit('goodsPriceDiscount');
},
}

效果图

提交载荷（Payload）

这里修改商品名字。

store.js

// 统一修改商品名字
changeName: (state,payload) => {
var changeName = state.goodsList.map(function(item){
return {
price: item.price,
name: payload // 接收参数
}
})
state.goodsList = changeName;
}

这里的载荷

payload

可以是一个对象。

Page6.vue

<div>
<h2>我是第二个页面</h2>
<p>
<input placeholder="请输入新的名字" v-model="input_value" class="input_name" />
<button v-on:click="changeGoodsName">修改商品名字</button>
</p>
<ul class="ul_list page2">
<li v-for="item in dataList">
<p class="name">商品：{{item.name}}</p>
<p class="price">价格：￥{{item.price}}</p>
</li>
</ul>
</div>
methods: {
// 修改商品名字
changeGoodsName: function(){
this.$store.commit('changeName',this.input_value);
},
}

这里的载荷

payload

就是输入框的值。

效果图

代码执行过程

上面的

Mutation

执行过程是：按钮点击–>执行按钮点击事件方法–>执行

store.commit

–>执行

mutations

里面对应的方法–>修改

state

里面对应的数据–>页面渲染。

Mutation 需遵守 Vue 的响应规则

既然

Vuex

的

store

中的状态是响应式的，那么当我们变更状态时，监视状态的

Vue

组件也会自动更新。这也意味着

Vuex

中的

mutation

也需要与使用

Vue

一样遵守一些注意事项：

最好提前在你的

store

中初始化好所有所需属性。

当需要在对象上添加新属性时，你应该

使用

Vue.set(obj, 'newProp', 123)

, 或者

以新对象替换老对象。例如，利用

stage-3

的对象展开运算符我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

代码下载地址

请点击我！