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

This article introduces the relevant knowledge of "how to use the auxiliary function of vuex". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

MapStateimport {mapState} from 'vuex'export default {/ /... Computed: {. MapState (the {/ / arrow function makes the code more concise count: state = > state.count, / / passing the string parameter 'count' is equivalent to `state.count` countAlias:' count', / / in order to be able to use `this` to get the local state You must use the regular function countPlusLocalState (state) {return state.count + this.localCount}})}

The property name defined is the same as the name in state, and you can pass in an array

/ / define stateconst state= {count:1,} / / use the helper function computed: {... mapState (['count'])} mapGetterscomputed: {. MapGetters ({/ / map `this.roomCount` to `this.getters.auxiliary TodosCount` doneCount:' doneTodosCount'})} in the component.

When the property name is the same as defined in getters, you can pass in an array

Computed: {computed: {/ / use the object expansion operator to mix getter into computed objects... mapGetters (['doneTodosCount',' anotherGetter', / /...])}}

Summary:

Both mapState and mapGetters use computed for mapping

After mapping in the component, through this. Map attribute names for use

MapMutationsmethods: {... mapMutations ({add: 'increment' / / Map `this.add () `to `this.$store.commit (' increment')`})}

When the property name is the same as defined in mapMutatios, you can pass in an array

Methods: {... mapMutations (['increment', / / map `Mutations` to `this.$store.commit (' increment') `/ / `mapMutations` also supports payload: 'incrementBy' / / map `this.incrementBy (amount)` to `this.$store.commit (' incrementBy', amount) `]) } mapActiosmathods: {... mapActions ({add: 'increment' / / Map `this.add () `to `this.$store.dispatch (' increment')`})}

When the property name is the same as defined in mapActios, you can pass in an array

Methods: {... mapActions (['increment', / / mapping `this.$store.dispatch () `to `this.$store.dispatch (' increment')` / / `mapActions` also supports payload: 'incrementBy' / / mapping `this.incrementBy (amount) `to `this.$store.dispatch (' incrementBy', amount)`]),}

Summary

Both mapMutations and mapActios are mapped in methods

Become a method after mapping

Multiple modules

When not using auxiliary functions

This.$store.commit ('app/addCount')

Using the helper function, the first argument of the helper function gives the path to the namespace

Computed: {... mapState ('some/nested/module', {a: state = > state.a, b: state = > state.b})}, methods: {. MapActions (' some/nested/module', ['foo', / /-> this.foo ()' bar' / /-> this.bar ()])}

Or use the createNamespacedHelpers function to create a namespace-based helper function

Import {createNamespacedHelpers} from 'vuex'const {mapState, mapActions} = createNamespacedHelpers (' some/nested/module') / / the given path / / use method is the same as before export default {computed: {/ / find... mapState ({a: state = > state.a, b: state = > state.b})} Methods: {/ / find... mapActions (['foo',' bar'])}} "how to use the auxiliary function of vuex" in `some/nested/ module`. That's it. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.