Mutation状态更新

Mutation状态更新

Vuex的store状态的更新唯一方式：提交Mutation

Mutation主要包括两部分：

字符串的事件类型（type）

一个回调函数（handler）,该回调函数的第一个参数就是state。

mutation的定义方式：

通过mutation更新

Mutation传递参数

在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数

参数被称为是mutation的载荷(Payload)

Mutation中的代码:

但是如果参数不是一个呢?

比如我们有很多参数需要传递.

这个时候, 我们通常会以对象的形式传递, 也就是payload是一个对象.

这个时候可以再从对象中取出相关的信息.

Mutation提交风格

上面的通过commit进行提交是一种普通的方式

Vue还提供了另外一种风格, 它是一个包含type属性的对象

Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变, 依然如下:

Mutation响应规则

Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新.

这就要求我们必须遵守一些Vuex对应的规则:

提前在store中初始化好所需的属性.

当给state中的对象添加新属性时, 使用下面的方式:

方式一: 使用Vue.set(obj, ‘newProp’, 123)

方式二: 用心对象给旧对象重新赋值

我们来看一个例子:

当我们点击更新信息时, 界面并没有发生对应改变.

如何才能让它改变呢?

查看下面代码的方式一和方式二

都可以让state中的属性是响应式的.