挑战全网最幽默的Vuex系列教程:第三讲 Vuex旗下的Mutation

栏目: IT技术 · 发布时间: 4年前

内容简介:上一讲「Vuex 旗下的 State 和 Getter」,告诉了我们怎么去使用仓库 store 中的状态数据。当然,光会用肯定还不够,大部分的应用场景还得对这些状态进行操控,那么具体如何操控呢,这就是这一讲要说的重点。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 st

写在前面

上一讲「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

后记

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

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

OKR:源于英特尔和谷歌的目标管理利器

OKR:源于英特尔和谷歌的目标管理利器

(美) 保罗R.尼文(Paul R. Niven)、本•拉莫尔特(Ben Lamorte) / 况阳 / 机械工业出版社 / 2017-8-1 / 59.00元

内在动机驱动,而非绩效考核驱动 尤其适用快速扩张和转型期组织 谷歌、英特尔、领英、推特、星佳等硅谷知名企业成功的法宝 OKR(目标与关键结果法)是一套严密的思考框架和持续的纪律要求,旨在确保员工紧密协作,把精力聚焦在能促进组织成长的、可衡量的贡献上。 如何更好地将OKR集成到企业现有的绩效评估体系中? 如何确保OKR由高管团队来领导,而不仅仅是HR、IT或财务等职能部......一起来看看 《OKR:源于英特尔和谷歌的目标管理利器》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具