Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use the auxiliary function of 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 how to use the auxiliary function of vue.

The auxiliary functions of vue are: 1, mapState, mapping the state value of the global state management to the component's calculation attribute; 2, mapGetters, mapping the getters value of the global state management to the component's calculation attribute; 3, mapActions;4, mapMutations.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Auxiliary function of 1.Vue

MapState 、 mapGetters 、 mapActions 、 mapMutations

MapState maps the state value of global state management to the component's computational properties.

MapGetters maps the getters value of global state management to the calculated property of the component

MapMutation maps the value of mutation to the method

MapActions maps values in actions to methods

2.mapState auxiliary function

What is mapState? The official explanation is:

When a component needs to acquire multiple states, declaring these states as computational properties can be repetitive and redundant. To solve this problem, we can use the mapState helper function to help us generate computational properties so that you can press the key a few times less.

When I read this explanation, I may find it very empty and difficult to understand. What are the generation calculation properties? How many times do you press the button less?

MapState is the grammatical sugar of state. What is grammatical sugar? My understanding of grammatical sugar is that I am already proficient in an operation, and there is no problem with this operation, why use the so-called "better, better operation"? After using it for a period of time, it smells good!

3. How to use

Before using mapState, import this helper function.

Import {mapState} from 'vuex'

Mode of use

-{{count}} {{dataCount}} + {{sex}} {{myCmpted}} import {mapState} from 'vuex'export default {data () {return {str:' nationality', dataCount: this.$store.state.count}}, computed: mapState ({count: 'count', / / the first way to write sex: (state) = > state.sex / / the second way to write from: function (state) {/ / use the ordinary function this to point to the vue instance. Note that return this.str +':'+ state.from}, / / notice that the following writing looks the same as above. In fact, the this pointer of the arrow function does not point to the vue instance. So don't abuse the arrow function / / from: (state) = > this.str +':'+ state.from myCmpted: function () {/ / you don't need state here, test the original usage of computed return 'test' + this.str}}), methods: {increment () {this.$store.commit ('increment')} Decrement () {this.$store.commit ('decrement')}

Computed can receive the return value of the mapState function, and you can receive the value in store in three ways in your code, as shown in the comments.

What if I want to use mapState later? Actually, it's very simple.

/ / the previous computedcomputed: {fn1 () {return...}, fn2 () {return...}, fn3 () {return...}.} / / after introducing the mapState helper function, computed:mapState ({/ / first copy and paste fn1 () {return...}, fn2 () {return...}, fn3 () {return...}. / / re-maintain vuex count:'count'}) 4. Object expansion operator

... MapState is not an extension of mapState, but... An extension of the expander of the object.

/ / the previous computedcomputed: {fn1 () {return...}, fn2 () {return...}, fn3 () {return...}.} / / after the introduction of the mapState helper function, computed: {/ / the original fn1 () {return...}, fn2 () {return...}, fn3 () {return.}. / / then maintain vuex. MapState ({/ / here. It's not an ellipsis, it's the object extender count:'count'})

MapState, mapGetters, mapActions and mapMutations are used in more or less the same way.

At this point, I believe you have a deeper understanding of "how to use the auxiliary function of vue". 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.