zoukankan      html  css  js  c++  java
  • vuex 中关于 mapMutations 的作用

      mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中。和 mapActions 的功能几乎一样,我们来直接看它的实现:

    export function mapMutations (mutations) {
    	const res = {}
    	normalizeMap(mutations).forEach(({ key, val }) => {
    		res[key] = function mappedMutation (...args) {
    			return this.$store.commit.apply(this.$store, [val].concat(args))
    		}
    	})
    	return res
    }
    

      函数的实现几乎也和 mapActions 一样,唯一差别就是映射的是 store 的 commit 方法。为了更直观地理解,我们来看一个简单的例子:

    import { mapMutations } from 'vuex'
    export default {
    	// ...
    	methods: {
    		...mapMutations([
    			'increment' // 映射 this.increment() 到 this.$store.commit('increment')
    		]),
    		...mapMutations({
    			add: 'increment' // 映射 this.add() 到 this.$store.commit('increment')
    		})
    	}
    }
    

      经过 mapMutations 函数调用后的结果,如下所示:

    import { mapActions } from 'vuex'
    export default {
    	// ...
    	methods: {
    		increment(...args) {
    			return this.$store.commit.apply(this.$store, ['increment'].concat(args))
    		}
    		add(...args) {
    			return this.$store.commit.apply(this.$store, ['increment'].concat(args))
    		}
    	}
    }
    

    .

  • 相关阅读:
    Django请求生命周期
    继上一篇Django的数据库数据的编辑和删除
    NumPy-布尔索引
    NumPy-基础索引与切片
    NumPy-数组算术
    NumPy-ndarray 的数据类型
    NumPy-生成ndarray
    Django 静态资源,请求,数据库的连接和操作
    设置谷歌默认浏览器
    奋斗史-IT女生是怎样炼成的
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7638069.html
Copyright © 2011-2022 走看看