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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
leaflet的开发入门教程
Nov 17 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
mocha的时序规则讲解
Feb 16 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
vue实现select下拉显示隐藏功能
Sep 30 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
js实现聊天对话框
2020/02/08 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python计算方程式根的方法
2015/05/07 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python基于http下载视频或音频
2018/06/20 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
tensorflow自定义激活函数实例
2020/02/04 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
思想汇报范文
2013/11/04 职场文书
集中采购方案
2014/06/10 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
泰山导游词
2015/02/02 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
获奖感言范文
2015/07/31 职场文书
用python实现监控视频人数统计
2021/05/21 Python