vuex 源码:深入 vuex 之 mutation

时间: 2018-03-19阅读: 1243标签: vuex

前言

vuex 规定更改 state 的唯一方法是提交 mutation,主要是为了能用 devtools 追踪状态变化。

那么,提交 mutation 除了最主要的更改 state,它还做了其它一些什么事情呢,让我们来一探究竟。

注:本次阅读的是 vuex 的 2.0.0 版本,源码请戳 这里

准备

解读前,需了解一些知识:

  1. Vuex Module
  2. Vuex 严格模式
  3. Class 的基本语法 - this 的指向

解读

在解读前先来看看 mutation 的使用方式:

const store = new vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

store.commit('increment')

初步猜测,store 对象的初始化时将 mutation 属性对象保存起来,在使用 commit 提交的时候取出,并将 store 的 state 等状态作为参数传入,最后调用函数

好像跟没说一样哈哈。当然,我也不知道它还做了哪些事情。开始解读吧......

从构造函数 constructor 开始,依然过滤与 mutation 无关的代码

constructor (options = {}) {
  this._mutations = Object.create(null)

  // bind commit and dispatch to self
  const store = this
  const { commit } = this
  this.commit = function boundCommit (type, payload, options) {
    return commit.call(store, type, payload, options)
  }

  // init root module.
  installModule(this, state, [], options)
}

mutation 的注册

mutation 的实现主要分两步,一是初始化 install,二是实现 commit 函数。先来看看初始化的 installModule 方法吧。

function installModule (store, rootState, path, module, hot) {
  const {
    mutations
  } = module

  if (mutations) {
    Object.keys(mutations).forEach(key => {
      registerMutation(store, key, mutations[key], path)
    })
  }
}

代码里循环 options 的 mutations,将其作为参数传入 registerMutation 方法,定位到 registerMutation 方法中(自动忽略 path):

function registerMutation (store, type, handler) {
  const entry = store._mutations[type] || (store._mutations[type] = [])
  entry.push(function wrappedMutationHandler (payload) {
    handler(store.state, payload)
  })
}

将 mutations 保存到了 store._mutations 数组里面,这里可能会好奇一下,为什么同一个 type 对应的是一个数组呢,而不是一个函数。为了解释,小小透露一下。在使用了 module 的情况下,模块中不可避免地可能出现多个相同名称的 mutations,当使用 commit 时,多个相同名称的 mutations 会依次触发。

const store = new vuex.Store({
  // ...
  mutations: {
    addNote () {
      console.log('root addNote')
    }
  },
  modules: {
    a: {
      mutations: {
        addNote () {
          console.log('module a addNote')
        }
      }
    }
  }
})

以上代码,如果调用 commit('addNote') 的话,那么两个 addNote 方法都会执行,所以两个 addNote 方法都是被放到 store._mutations 数组里面的。试想一下,如果不是数组,那么只会执行其中一个 addNote 方法了。

commit 的实现

接下来看 commit 的实现,这个 commit 挺有趣的,为什么要在构造函数里重新赋值一遍呢。其实,这里是 this 默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。具体了解请戳Class 的基本语法 - this 的指向

// bind commit and dispatch to self
const store = this
const { commit } = this
this.commit = function boundCommit (type, payload, options) {
  return commit.call(store, type, payload, options)
}

接下来就来看看 commit 的实现,将保存的 store._mutations 数组取出循环执行。需注意的是这个 _withCommit 方法。

commit (type, payload, options) {
  const mutation = { type, payload }
  const entry = this._mutations[type]

  this._withCommit(() => {
    entry.forEach(function commitIterator (handler) {
      handler(payload)
    })
  })
}

再看 _withCommit 方法,乍看一下,这个方法好像没什么作用。

_withCommit (fn) {
  const committing = this._committing
  this._committing = true
  fn()
  this._committing = committing
}

里面有一个 this._committing 变量,搜索了一下,大致了解了它的作用。首先我们知道 vuex 有一个严格模式

默认不开启,所以 this._committing 变量没什么作用。如果手动开启,state 初始化时在 resetStoreVM 方法里有相应的处理。

// enable strict mode for new vm
if (store.strict) {
  enableStrictMode(store)
}

定位到里面的 enableStrictMode 方法一探究竟:

function enableStrictMode (store) {
  store._vm.$watch('state', () => {
    assert(store._committing, `Do not mutate vuex store state outside mutation handlers.`)
  }, { deep: true, sync: true })
}

这里的 store._committing 默认是 false,所以我们直接赋值 state 会 watch 到并抛出错误。只有在刚刚的 _withCommit 方法里将其设置为 true 再赋值,才不会抛出错误。

总结

mutation 在注册的时候,用一个 store._mutations 数组将 module 模块中所有同名的方法都保存起来,在 commit 的时候则将其所有同名的方法取出并执行。

在开启严格模式的情况下进行 commit 提交,vuex 使用 _withCommit 方法来保证状态变更是由 mutation 函数引起的,而其中是用一个 _committing 变量来判断。测试了一下,虽然会抛出错误,但还是能够进行状态变更的,但这样就不能用 devtools 追踪状态变化了。

最后需记住,mutation 只支持同步更新状态。


来源:https://segmentfault.com/a/1190000013818973

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/515

使用Vuex解决Vue中的身份验证

Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。

vue中 Vuex

由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态

vue.js路由与vuex数据模型设计

本则路由考虑验证进入登录页面,完成登录操作进入首页。使用enter键切换频道

Vuex与组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。也就是说 Vuex 用于单页面应用组件之间的数据共享,在组件嵌套很多层的情况下,Vue 中父子组件的通信过程就变得很麻烦,此时使用 Vuex 方便了组件间的通信。

为什么使用Vuex

在学习Vuex之前,先了解一下“单向数据流”。Vuex核心就是它的store,其中,有三个重要的部分,State:通过它存取多个组件共享的数据。Mutations:可以改变State中的数据,Actions:提交mutation,可以包含任意异步操作这一步不是必要的。

vuex的持久化

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应 用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.

关于Vuex的action传入多个参数的问题

已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成,然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数

Vuex状态管理,state、getter

首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:接下来,在 main.js里面引入store,然后再全局注入一下

vue 计算属性与vuex getters的传参

计算属性比method好的一点是计算属性依赖数据是否变化而执行,不是每一次都执行,效率比较高,为了复用代码可以给计算属性进行传参

Vuex的数据重新加载页面后消失

一般我们在登录成功的时候需要把用户信息,菜单信息放置vuex中,作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广