Vuex中的Mutations的具体使用方法


Posted in Javascript onJune 01, 2020

在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离。

Mutations使用

Vuex 中的 mutations 非常类似于事件,每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件,当触发响应类型的时候调用handker(),调用type的时候需要用到store.commit方法。

示例:

这个回调函数会接受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')

提交载荷(Payload)

载荷简单的理解就是往 handler(state) 中传参 handler(state, pryload) 。

示例:

大多数情况下,载荷是一个对象:

mutations: {
 // 提交荷载
 increment (state, payload) {
  state.count += payload.amount
 }
}

提交荷载有两种方式:

// 把载荷和type分开提交
store.commit('increment', {
 amount: 10
})

// 整个对象都作为载荷传给mutation函数
store.commit({
 type: 'increment',
 amount: 10
})

我们可以根据自己的喜好来选择使用哪种提交方式。

commit

我们可以在组件中使用 this.$store.commit('xxx') 提交 mutations。

示例:
或者可以使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

示例:

在使用mapMutations 辅助函数之前同样需要先引入:

<script>
import { mapMutations } from 'vuex'
export default {
  computed:{
    count(){
      return this.$store.state.count
    }
  },
  methods:{
    ...mapMutations([
      'increment',
      'decrement'
    ])
  }
}
</script>

Mutations 需遵守 Vue 的响应规则

Vuex 的 store 中的状态是响应式的,所以当我们变更状态时,监视状态的 Vue 组件也会自动更新。

这也意味着 Vuex 中的 mutations 也需要与使用 Vue 一样遵守一些注意事项,如下所示:

  • 最好提前在 store 中初始化好所有所需属性。
  • 当需要在对象上添加新属性时,应该使用 Vue.set(obj, 'newProp', 123),或者以新对象替换老对象。例如利用对象展开运算符可以写成:state.obj = {...state.obj, newProp: 123 }。

使用常量替代 Mutations 事件类型

使用常量替代 mutations 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutations 一目了然:

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

store.js 文件内容如下所示:

// 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')的方式调用的,其中increment方法是以字符串的形式代入。如果项目小,一个人开发的话倒还好,但是项目大了,编写代码的人多了,那就麻烦了,因为需要 commit 的方法一多,就会显得特别混乱,而且以字符串形式代入的话,一旦出了错,很难排查。

所以,在需要多人协作的大型项目中,最好还是用常量的形式来处理 mutation。

必须是同步函数

我们要记住的是,Mutation 必须是同步函数。

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

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

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

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

到此这篇关于Vuex中的Mutations的具体使用方法的文章就介绍到这了,更多相关Vuex Mutations内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 #Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 #Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 #Javascript
JS如何寻找数组中心索引过程解析
Jun 01 #Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 #Javascript
bootstrap-table后端分页功能完整实例
Jun 01 #Javascript
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
You might like
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
北承题目(C++)
2012/05/16 面试题
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
小学国庆节活动方案
2014/02/11 职场文书
家长对学生的评语
2014/04/18 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js