Vuex中的mutations

1、Mutation介绍

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

2、Mutation的使用

1、无参数的状态更新

mutation的定义方式：

通过mutation更新：

具体流程如下：

2、Mutation传递参数

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

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

 1、一个参数

mutation的定义方式：

通过mutation更新：

例如counte加多少由传入参数决定：

2、很多参数需要传递

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

假设现在要添加学生，要传递多个学生的信息

3、Mutation提交风格

1、普通的提交

上面讲的都是普通的提交风格

2、特殊的提交

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

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

4、响应式的在mutations中给state添加、删除属性

假设想给state里的info添加删除属性，怎么样使操作添加到响应式系统呢：

①添加：

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

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

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

 

②删除

Vue.delete(obj, 'deleteProp')

 

5、Mutation常量类型

常量替代Mutation事件的类型，是一种常用的，防止写错的方式

1、可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量.

2、导入这个常数并使用

//不能这么写，因为在mutations-type里面INCREMENT暴怒是用的export default
//import  INCREMENT  from "./store/mutations-types";
//所以要想下面这么写：
import { INCREMENT } from "./store/mutations-types";

参考链接：

https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162