Shulou(Shulou.com)05/31 Report--

The main content of this article is to explain "what is the way to pass parameters to mapMutations in Vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the way to pass parameters to mapMutations in Vue"?

Pass the parameters in the method defined by the subcomponent. MapMutations reference

No more pushy, look at the code!

In the store file:

Import Vuex from 'vuex';import Vue from' vue';Vue.use (Vuex); let store = new Vuex.Store ({state: {name: 'h', age:' 19 years,}, mutations: {changeName (state, params) {console.log (params)) State.name = params.name}, changeAge (state, params) {state.age = params.age}},}) export default store

In VueDemo:

Here is son1 component name: {{name}} age: {{age}} renamed import {mapState, mapMutations} from "vuex"; export default {data () {return {list: {name: "6666"}};}, computed: {. MapState (["name", "age"])}, methods: {hehe () {this.changeName (this.list) },... mapMutations (["changeName"])}}; of course, you can also change your name by passing state.age = params directly.

Omit data parameter transfer

... mapMutations (["changeName"]) about the role of mapMutations.

The mapMutations utility function maps the commit method in store to the methods of the component. Almost the same function as mapActions, let's look directly at its implementation:

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}

The implementation of the function is almost the same as that of mapActions, except that the commit method of store is mapped. To understand it more intuitively, let's look at a simple example:

Import {mapMutations} from 'vuex'export default {/ /... methods: {... mapMutations ([' increment' / / mapping this.increment () to this.$store.commit ('increment')]),... mapMutations ({add:' increment' / / mapping this.add () to this.$store.commit ('increment')})}}

The result after the mapMutations function call is as follows:

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))} so far I believe that you have a deeper understanding of "what is the way to pass parameters to mapMutations in Vue", so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.