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 相关文章推荐
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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
PHP实现今天是星期几的几种写法
2013/09/26 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
angular.bind使用心得
2015/10/26 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
vue实现购物车列表
2020/06/30 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python中pika模块问题的深入探究
2018/10/13 Python
pandas分区间,算频率的实例
2019/07/04 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
python实现简单坦克大战
2020/03/27 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
大学生求职简历的自我评价
2013/10/14 职场文书
高校毕业生登记表自我鉴定
2013/11/03 职场文书
销售员岗位职责范本
2014/02/03 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
大学计划书范文800字
2014/08/14 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang