写点什么

Vue 进阶(四十三):Vuex 之 Mutations 详解

用户头像
华强
关注
发布于: 1 小时前
Vue进阶(四十三):Vuex之Mutations详解

一、前言

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

二、如何使用 mutations ?

mutation结构


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


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


载荷(payload


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


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')  })}}
复制代码

三、源码分析

// 4个参数,store是Store实例,type为mutation的type,handler,path为当前模块路径function registerMutation (store, type, handler, path = []) {  //通过type拿到对应的mutation对象数组  const entry = store._mutations[type] || (store._mutations[type] = [])   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._subscribersif (subs.indexOf(fn) < 0) {  subs.push(fn)}return () => {  const i = subs.indexOf(fn)  if (i > -1) {    subs.splice(i, 1)    }  } }
复制代码

四、拓展阅读

发布于: 1 小时前阅读数: 2
用户头像

华强

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(四十三):Vuex之Mutations详解