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

This article mainly introduces the vue front-end development auxiliary function state management example analysis, the article is very detailed, has a certain reference value, interested friends must read it!

MapState

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. When you do not use mapState, get the state of the object, usually in the computes property of the usage component, as follows:

/ /.... Computed: {count: function () {return this.$store.state.count}} / /.

Using mapState can be simplified to:

Import {mapState} from 'vuex' / / introduces the mapState object export default {/ /... Computed: mapState (the {/ / arrow function makes the code more concise count: state = > state.count,})} or import {mapState} from 'vuex' / / introduces the mapState object export default {/ /. Computed: mapState ({'count', / / consistent with state name countAlias:'count' / / countAlias is an alias used in referenced components})} mapGetters

The mapGetters helper function simply maps the getters in store to local evaluation attributes, similar to state. Simplified by calculating the function code to

Import {mapGetters} from 'vuex'export default {/ /... computed: {/ / use the object expansion operator to mix getters into the computed object... mapGetters ([' countDouble', 'CountDoubleAndDouble', / /.. ])}}

MapGetters can also use aliases.

MapMutations

Use the mapMutations helper function to map methods in the component to store.commit calls, and the simplified code is as follows:

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

Use the mapActions helper function to map the methods of the component to store.dispatch calls, and the simplified code is as follows:

Import {mapActions} from 'vuex'export default {/ /.. methods: {... mapActions ([' incrementN' / / mapping this.incrementN () is this.$store.dispatch ('incrementN')]),... mapActions ({add:' incrementN' / / mapping this.add () is this.$store.dispatch ('incrementN')})} example

Follow the example in vue State Management (2), using auxiliary functions. Helper functions are used in the CountChange and ComputeShow components, and the rest of the code does not need to be changed.

Two helper functions of mapState,mapGetters are used in ComputeShow, the code is as follows

The following is to use computed to directly obtain the state data in stores. When the state data changes, it will be refreshed synchronously.

Use computed to receive state: {{computedState}} receive Getters using computed: {{computedGetters}} import {mapState,mapGetters} from 'vuex' / / introduce mapState,mapGetters object export default {name:' ComputeShow', computed: {... mapState ({computedState:'count' / / alias: computedState}),... mapGetters ({computedGetters:'getChangeValue' / / alias: computedGetters})}}

It is recommended to add aliases when using map, so that it is decoupled from the contents of stores. Two auxiliary functions, mapMutations and mapActions, are used in CountChange, and the code is as follows

+ add-decrease import {mapMutations, mapActions} from 'vuex' / / introduce mapMutations, mapActions object export default {name:' CountChange', data () {return {paramValue: 1,}}, methods: {... mapMutations ({subNum: 'sub' / / add alias subNum}) ... mapActions ({addNum: 'increment' / / mapping this.incrementN () is this.$store.dispatch (' incrementN')})}}

Also give an alias to the method in stores, and when you need to pass parameters, pass the parameters to actions or mutations by alias. For example, an object {res:''} is transferred in "addNum ({res: parseInt (paramValue)})".

These are all the contents of the article "sample Analysis of State Management of Auxiliary functions for vue Front-end Development". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.