Vue中mapMutations传递参数方式

目录
  • 通过子组件定义的方法传递参数
    • 在…mapMutations引用
  • 当然也可以写直接传递
  • 关于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))
        }
    }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue组件间数据传递的方式(3种)

    vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div class='container'> <demo2 :msg="msg" @change="change" /> </div> </template> <script> import demo2 from './demo2' export

  • 在Vuex中Mutations修改状态操作

    上篇是读取state,这篇是修改状态.即如何操作Mutations. 一. $store.commit( ) Vuex提供了commit方法来修改状态 1.store.js文件 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } } 2.在button上的修改方法 <button @click="$store.commit('add')">+</button>

  • Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.mutation 必须是同步函数. 不带载荷(只改变数据的状态) 接前面几篇文章的例子,这里我们修改商品价格减半. store.js mutations: { //商品价格减半:

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

    问题: 已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成 然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数 一开始遇到的问题是加入购物车方法中要传入一个字典对象里面保存产品信息item,还要传入一个产品数量的参数num 然而如果这么写的话就会报错:context.commit(mutations,item,num) 解决办法: 将第二个参数以对象的放式提交就像这样 mu

  • Vue中mapMutations传递参数方式

    目录 通过子组件定义的方法传递参数 在…mapMutations引用 当然也可以写直接传递 关于mapMutations的作用 通过子组件定义的方法传递参数 在…mapMutations引用 不多逼逼,看代码! store文件中: import Vuex from 'vuex'; import Vue from 'vue'; Vue.use(Vuex); let store = new Vuex.Store({     state: {         name: 'hahahah',    

  • Spring Boot/VUE中路由传递参数的实现代码

    在路由时传递参数,一般有两种形式,一种是拼接在url地址中,另一种是查询参数.如:http://localhost:8080/router/tang/101?type=spor&num=12.下面根据代码看一下,VUE 和 Spring Boot 中各自是如何处理传递和接受参数的. Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestContro

  • Filter中获取传递参数方式(解决post请求参数问题)

    目录 Filter中获取传递参数 1. GET 传递 2. Post 传递 XyRequestWrapper 类 XySecurityFilter Filter中获取传递参数 1. GET 传递 参数可以直接通过request.getParameter获取. 2. Post 传递 产生不能过直接从request.getInputStream() 读取,必须要进行重新写.(request.getInputStream()只能够读取一次) 方式: 通过重写 HttpServletRequestWra

  • mybatis3中@SelectProvider传递参数方式

    mybatis3 @SelectProvider传递参数 一.通常情况下我喜欢使用实体或者vo去传参数 这样在Provide的方法中可以直接通过#{param}(param为你实体中的字段)来获取你要的参数. 二.使用map传参数 在超过一个参数的情况下,@SelectProvide方法必须接受Map<String, Object>做为参数, 如果参数使用了@Param注解,那么参数在Map中以@Param的值为key,如下例中的userId: 如果参数没有使用@Param注解,那么参数在Ma

  • 深入理解python中函数传递参数是值传递还是引用传递

    目前网络上大部分博客的结论都是这样的: Python不允许程序员选择采用传值还是传 引用.Python参数传递采用的肯定是"传对象引用"的方式.实际上,这种方式相当于传值和传引用的一种综合.如果函数收到的是一个可变对象(比如字典 或者列表)的引用,就能修改对象的原始值--相当于通过"传引用"来传递对象.如果函数收到的是一个不可变对象(比如数字.字符或者元组)的引用,就不能 直接修改原始对象--相当于通过"传值"来传递对象. 你可以在很多讨论该问题

  • python传递参数方式小结

    本文实例总结了python传递参数方式.分享给大家供大家参考.具体分析如下: 当形参如*arg时表示传入数组,当形参如**args时表示传入字典. def myprint(*commends,**map): for comm in commends: print comm for key in map.keys(): print key,map[key] myprint("hello","word",username="tian",name=&q

  • 详解Flutter中数据传递的方式

    目录 1.构造方法传递 2.InheritedWidget 3.Notification 4.Stream & event_bus 在Flutter中,常见的数据传递一共有以下几种: 1.构造方法传递 Flutter的构造方法具备着dart语言的特点,参数具备可选状态,通过构造方法传递数据,可以很方便的将任意数据进行传递,平时开发中,A跳转B页面最常用的方法就是通过构造方法进行传递.比如我们最常见的Key就是通过构造一级一级向下传递的. 优点: 相邻页面之间传递数据非常方便,你不需要进行任何额外

  • 浅谈angular4.0中路由传递参数、获取参数最nice的写法

    研究ng4的官网,终于找到了我想要的方法.我想要的结果是用'&'拼接参数传送,这样阅读上是最好的. 否则很多'/'的拼接,容易混淆参数和组件名称. 一般我们页面跳转传递参数都是这样的格式: http://angular.io/api?uid=1&username=moon 但是在SPA单页应用中却是下面的结果居多[初级视频都是这样敷衍的] http://angular.io/api/1/moon 那么怎么实现我说的结果呢? 重点开始了. 实现从product页面跳转到product-det

  • 浅谈vue中所有的封装方式总结

    浅谈vue中所有的封装方式总结

    目录 1.封装API 2.注册全局工具组件 3.封装全局函数 4. 为了减少页面代码量的封装 如何确定我需要封装呢? 1.复用,如果觉得以后还会用到 2.你觉得方便,别的地方可能也需要用 3.如果不封装,页面代码臃肿的时候 1.封装API 使用场景:业务中最常见最普通的封装 步骤一: 步骤二:  步骤三:  2.注册全局工具组件 使用场景:想让组件全局可用,尤其是第三方插件使用时 步骤一:   步骤二: 3.封装全局函数 使用场景:有些逻辑处理函数代码量很大,且具有独特功能(如日期处理函数,数组

  • vue项目webpack中Npm传递参数配置不同域名接口

    项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const me

随机推荐