小兔网

Vuex中Mutations怎么理解?怎么用?

相关推荐:《vue.js教程

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

怎么用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,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')  })}}

源码分析

知识兔
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:订阅store的mutation

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)    }  } }

更多编程相关知识,请访问:编程教学!!

以上就是Vuex中Mutations怎么理解?怎么用?的知识。速戳>>知识兔学习精品课!