写在前面

上一讲「Vuex 旗下的 State 和 Getter」,告诉了我们怎么去使用仓库 store 中的状态数据。当然,光会用肯定还不够,大部分的应用场景还得对这些状态进行操控,那么具体如何操控呢,这就是这一讲要说的重点。

只有 mutation 能动 State

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

const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
// 事件类型 type 为 increment
increment (state) {
// 变更状态
state.count++
}
}
})

注意,我们不能直接 store.mutations.increment() 来调用,Vuex 规定必须使用 store.commit 来触发对应 type 的方法:

store.commit('increment')

传参

我们还可以向 store.commit 传入额外的参数:

mutations: {
increment (state, n) {
state.count += n
}
}

// 调用

store.commit('increment', 10)

mutation 中的这个额外的参数,官方给它还取了一个高大上的名字:载荷(payload)。说实话,第一次在文档中看到这个标题「提交载荷」,真的就不想往下看了。

我们往往不是败给了这些生涩的概念,而是败给了自己内心的恐惧。

大多数情况下,载荷是一个对象,能够让我们更加易读:

mutations: {

increment (state, payload) {

state.count += payload.amount

}

}

关于提交的方式,有两种:

// 1、把载荷和type分开提交
store.commit('increment', {
amount: 10
}) // 2、整个对象都作为载荷传给 mutation 函数
store.commit({
type: 'increment',
amount: 10
})

当然,使用哪种方式没有绝对的界限,纯看自己的喜好,就我个人而言,还是比较倾向于使用第二种姿势,放在一起更实在。

修改规则

简单修改基础类型的状态数据倒是简单,没什么限制,但是如果修改的是对象,那就要注意了。比如这个例子:

const store = new Vuex.Store({
state: {
student: {
name: '小明',
sex: '女'
}
}
})

这个时候,我们如果想要给 student 添加一个年龄age: 18属性,怎么办呢?

是的,直接在 sex 下面把这个字段加上去不就行了,能这样当然最好了。但是如果我们要动态的修改呢?那就得遵循 Vue 的规则了。如下:

mutations: {
addAge (state) {
Vue.set(state.student, 'age', 18)
// 或者:
// state.student = { ...state.student, age: 18 }
}
}

以上就是给对象添加属性的两种方式,当然,对于已添加的对象,如果想修改具体值的话,直接更改就是,比如 state.student.age=20 即可。

至于为什么要这样,之前我们了解过,因为 store 中的状态是响应式的,当我们更改状态数据的时候,监视状态的 Vue 组件也会自动更新,所以 Vuex 中的 mutation 也需要与使用 Vue 一样遵守这些规则。

使用常量

就是使用常量来替代 mutation 事件的名字。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({
state: { ... },
mutations: {
// 使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})

可能有人会有疑问啊,这样做到底有啥用,还得多创建个类型文件,用的时候还要导入进来,不嫌麻烦吗!

我们看看,mutation 是怎么调用的:store.commit('increment'),可以发现,这里 commit 提交的方法 increment,是以字符串的形式代入的。如果项目小,一个人开发的话倒还好,但是项目大了,编写代码的人多了,那就麻烦了,因为需要 commit 的方法一多,就会显得特别混乱,而且以字符串形式代入的话,一旦出了错,很难排查。

所以,对于多人合作的大项目,最好还是用常量的形式来处理 mutation,对于小项目倒是无所谓,想偷懒的随意就好。

必须是同步函数

一定要记住,Mutation 必须是同步函数。为什么呢?

前面说了,我们之所以要通过提交 mutation 的方式来改变状态数据,是因为我们想要更明确地追踪到状态的变化。如果像下面这样异步的话:

mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}

我们就不知道什么时候状态会发生改变,所以也就无法追踪了,这与 Mutation 的设计初心相悖,所以强制规定它必须是同步函数。

store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。

最在最后

这一讲相对来说应该还是比较好理解的。对于官方我觉得比较难理解的,我都尽量用通俗易懂的示例来进行分析,来加深大家的理解,但是不知道效果如何。如果对大家有帮助,欢迎点赞和转载,注明出处即可。

转载声明:

作者:大宏说

链接:https://www.jianshu.com/p/64727454f151

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得点赞收藏呦,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...

胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。

胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!

挑战全网最幽默的Vuex系列教程:第三讲 Vuex旗下的Mutation的更多相关文章

  1. 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter

    先说两句 上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨).如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄 ...

  2. 挑战全网最幽默的Vuex系列教程:第五讲 Vuex的小帮手

    先说两句 前面已经讲完了 Vuex 下的 State.Getter.Mutation 及 Action 这四驾马车,不知道大家是否已经理解.当然,要想真正熟练掌握的话,还是需要不断的练习和动手实践才行 ...

  3. Vue.js 系列教程 4:Vuex

    这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...

  4. 挑战全网最幽默的Vuex系列教程:第一讲 Vuex到底是什么鬼

    先说两句 官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教程,很多地方就如同看圣经一样,比如「欧玛尼玛尼 ...

  5. 挑战全网最幽默的Vuex系列教程:第六讲 Vuex的管理员Module(实战篇)

    写在前面 这一讲是 Vuex 基础篇的最后一讲,也是最为复杂的一讲.如果按照官方来的话,对于新手可能有点难以接受,所以想了下,决定干脆多花点时间,用一个简单的例子来讲解,顺便也复习一下之前的知识点. ...

  6. 【全网最全的博客美化系列教程】08.自定义地址栏Logo

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  7. 全网最贴心webpack系列教程和配套代码

    webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...

  8. 【全网最全的博客美化系列教程】01.添加Github项目链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  9. 【全网最全的博客美化系列教程】02.添加QQ交谈链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

随机推荐

  1. 让vscode支持WePY框架 *.wpy

    WePY框架的.wpy 文件在微信开发者工具中无法打开,这里使用vscode 打开,并安装vetur 和vetur-wepy  插件即可

  2. Hadoop Zookeeper 分布式服务框架

    what is Zookeeper? 1,开源的分布式的,为分布式应用提供协调服务的Apache项目2,提供一个简单原语集合,以便于分布式应用可以在它之上构建更高层次的同步服务3,设计非常易于编程,它 ...

  3. return console.log()结果为undefined现象的解答

    console.log总是出现undefined--麻烦的console //本文为作者自己思考后总结出的一些理论知识,若有错误,欢迎指出 bug出现 ​ 需求如下:新建一个car对象,调用其中的de ...

  4. HIT软件构造课程3.2总结(Designing Specificaton)

    本节转向“方法/函数/操作”如何定义 上一节是名词 这一节是动词 1.编程语言中的函数和方法 方法 使用者不需要知道方法内部如何实现,这叫做“抽象”. 参数 参数类型是否匹配,在静态检查时完成. 返回 ...

  5. 悟懂MapReduce,不纠结!

    在<谷歌 MapReduce 初探>中,我们通过统计词频的 WordCount 经典案例,对 Google 推出的 MapReduce 编程模型有了一个认识,但是那种认识,还只是停留在知道 ...

  6. 学编程这么久,还傻傻分不清什么是方法(method),什么是函数(function)?

    在编程语言中有两个很基础的概念,即方法(method)和函数(function).如果达到了编程初级/入门级水平,那么你肯定在心中已有了初步的答案. 也许在你心中已有答案了 除去入参.返回值.匿名函数 ...

  7. STM32CubeMX工程定时器配置

    STM32CubeMX生成工程 选择自己的芯片型号 配置RCC寄存器时钟为外部晶振 单击芯片配置GPIO,选择输出方式,重命名标签等 进入时钟配置,本人使用的为8M外部晶振作为时钟源,PLL时钟源选择 ...

  8. spring08

    这里主要学习的是关于spring之后中与ioc不同的aop技术:面向切面编程是spring基石之一: 解决代码混乱文体,代码分散,当部分修改时,要逐个修改当更多的日志以及验证介入之后会使代码变得更加的 ...

  9. 关于web数据库的相关知识点的操作

    主要是怎样建立与数据库的连接.对于框架是固定的: 下面是对于数据库的连接操作: package com.DBU; //数据库连接 import java.sql.Connection; import ...

  10. Linux bash篇(四 命令)

    1.一次执行多个命令        ; eg: ls -al ; touch data.txt 2.根据情况执行命令       &&     || cmd1 && c ...