Vuex之理解Mutations的用法实例


Posted in Javascript onApril 19, 2017

1.什么是mutations?

上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据),Vue的视图是由数据驱动的,也就是说state里面的数据是动态变化的,那么怎么改变呢,切记在Vuexstore数据改变的唯一方法就是mutation

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

2.怎么用mutations?

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

const store = new Vuex.Store({
  state: {
    count: 1
    },
  mutations: {
  increment (state) {   //注册时间,type:increment,handler第一个参数是state;
     // 变更状态
    state.count++}}})
    
  store.commit('increment')  //调用type,触发handler(state)

载荷(payload):简单的理解就是往handler(stage)中传参handler(stage,pryload);一般是个对象。

mutations: {
 increment (state, n) {
   state.count += n}}
 store.commit('increment', 10)
mutation-types:将常量放在单独的文件中,方便协作开发。
  // 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
 }
}
})

commit:提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

import { mapMutations } from 'vuex'

export default {

methods: {
 ...mapMutations([
  'increment' // 映射 this.increment() 为 
this.$store.commit('increment')]),
 ...mapMutations({
  add: 'increment' // 映射 this.add() 为 
this.$store.commit('increment')
 })}}

3.源码分析

registerMutation:初始化mutation

function registerMutation (store, type, handler, path = []) {
 //4个参数,store是Store实例,type为mutation的type,handler,path为当前模块路径
  const entry = store._mutations[type] || (store._mutations[type] = 
[]) //通过type拿到对应的mutation对象数组
   entry.push(function wrappedMutationHandler (payload) {
   //将mutation包装成函数push到数组中,同时添加载荷payload参数  
   handler(getNestedState(store.state, path), payload)
   //通过getNestedState()得到当前的state,同时添加载荷payload参数
  })
 }

commit:调用mutation

commit (type, payload, options) {
 // 3个参数,type是mutation类型,payload载荷,options配置
  if (isObject(type) && type.type) {
    // 当type为object类型,
   options = payload
   payload = type
   type = type.type
 }
 const mutation = { type, payload }
 const entry = this._mutations[type]
  // 通过type查找对应的mutation
 if (!entry) {
 //找不到报错
  console.error(`[vuex] unknown mutation type: ${type}`)
  return
 }
 this._withCommit(() => {
  entry.forEach(function commitIterator (handler) {
  // 遍历type对应的mutation对象数组,执行handle(payload)方法
  //也就是开始执行wrappedMutationHandler(handler)
   handler(payload)
  })
 })
 if (!options || !options.silent) {
  this._subscribers.forEach(sub => sub(mutation, this.state))
  //把mutation和根state作为参数传入
 }
}

subscribers:订阅storemutation

subscribe (fn) {
const subs = this._subscribers
if (subs.indexOf(fn) < 0) {
 subs.push(fn)
 }
return () => {
 const i = subs.indexOf(fn)
 if (i > -1) {
  subs.splice(i, 1)
  }
 }
 }

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 数组的for循环到底应该怎么写?
May 31 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
vant实现购物车功能
Jun 29 Javascript
Vuex之理解Getters的用法实例
Apr 19 #Javascript
Vuex之理解state的用法实例
Apr 19 #Javascript
微信小程序 聊天室简单实现
Apr 19 #Javascript
Vuex之理解Store的用法
Apr 19 #Javascript
微信小程序 判断手机号的实现代码
Apr 19 #Javascript
Vuex简单入门
Apr 19 #Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 #Javascript
You might like
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
使用python实现省市三级菜单效果
2016/01/20 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
通过shell+python实现企业微信预警
2019/03/07 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python如何将多个PDF进行合并
2019/08/13 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
学习Python需要哪些工具
2020/09/04 Python
python利用线程实现多任务
2020/09/18 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
采购主管工作职责
2013/12/12 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
2014年德育工作总结
2014/11/20 职场文书
英文投诉信格式
2015/07/03 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
Pandas-DataFrame知识点汇总
2022/03/16 Python