Vue中mapMutations传递参数方式
更新时间:2022年04月12日 11:50:10 作者:欧冠开了
这篇文章主要介绍了Vue中mapMutations传递参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
通过子组件定义的方法传递参数
在…mapMutations引用
不多逼逼,看代码!
store文件中:
import Vuex from 'vuex'; import Vue from 'vue'; Vue.use(Vuex); let store = new Vuex.Store({ state: { name: 'hahahah', age: '19', }, mutations: { changeName(state, params) { console.log(params); state.name = params.name }, changeAge(state, params) { state.age = params.age } }, }) export default store
VueDemo中:
<template> <div> <h4>这里是son1组件</h4> name:{{name}} age:{{age}} <button @click="hehe">改名字</button> </div> </template>
<script> import { mapState, mapMutations } from "vuex"; export default { data() { return { list: { name: "6666" } }; }, computed: { ...mapState(["name", "age"]) }, methods: { hehe() { this.changeName(this.list); }, ...mapMutations(["changeName"]) } }; </script> <style> </style>
当然也可以写直接传递
state.age = params
<button @click="changeName(555555)">改名字</button>
省略data传参
...mapMutations(["changeName"])
关于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)) } } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2023-03-03vue3数据监听watch/watchEffect的示例代码
我们都知道监听器的作用是在每次响应式状态发生变化时触发,在组合式 API 中,我们可以使用 watch()函数和watchEffect()函数,下面我们来看下vue3如何进行数据监听watch/watchEffect,感兴趣的朋友一起看看吧2023-02-02Vue CLI4 Vue.config.js标准配置(最全注释)
这篇文章主要介绍了Vue CLI4 Vue.config.js标准配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-06-06详解vue3.2新增的defineCustomElement底层原理
本文主要介绍了vue3.2新增的defineCustomElement底层原理,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-08-08
最新评论