The use of four map methods in vuex

The use of four map methods in vuex

There are four map methods in vuex, which can generate different codes for different elements

These four map methods are all the same, understand one and basically understand

1 Write a case

Now I want to display a piece of text, in which two parameters must be stored in the state of the store, so every time I get it, I have to get it through such a large string of codes, which is extremely complicated and unsightly. The style guide of Vue says that interpolation syntax should not be written so complicated

2 Computed property simplification

Of course, we can simplify by computing properties, but computing properties only support the use of current components

But it can be observed that the data in store.state.x is actually read, and the codes are the same, so is there a way to generate or encapsulate these redundant codes?

Of course, the designers of vuex have also considered this problem, so let's use the functions that generate related codes

3 mapState simplification

If you want to use the functions that generate related codes, you need to introduce vuex first, and introduce mapState from vuex

    // 引入vuex身上的mapState
    import {mapState} from 'vuex'

mapState is an object, there are many sets of keys, values, it has two ways of writing

Writing method 1 (object writing method)

  // 借助mapState生成计算属性,从state中读取数据(对象写法)
  ...mapState({sum:'sum',address:'address',info:'info'}),

Writing method 2 (array writing method)

In addition to object writing, there is a more streamlined array writing

Note that at this time, it must not be directly written in the shorthand form of the object, it should be put into an array and then written in the shorthand form

Each key has two purposes, one is the name of the generated computed property, and the other is the name of the property read from the state

// 借助mapState生成计算属性,从state中读取数据(数组写法)
    ...mapState(['sum','address','info']),

4 mapGetters simplified

The writing method of mapGetters and mapState is the same. First, it needs to be quoted from vuex

The writing method is also divided into object and array writing, which is exactly the same as mapState

Writing method 1 (object writing method)

     // 借助mapGetters生成计算属性,从getters中读取数据(对象写法)
     ...mapGetters({bigSum:'bigSum'}),

Writing method 2 (array writing method)

// 借助mapGetters生成计算属性,从getters中读取数据(数组写法)
 ...mapGetters(['bigSum']),

At this point, the optimization of mapState and mapState for computing properties is over. The following are mapActions and mapMutations optimization methods

Pay attention to observe that these codes are also very similar, and we can also optimize them

5 mapMutations

The first is to introduce mapMutations in vuex

Writing method 1 (object writing method)

 // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
 ...mapMutations({increment:'INCREMENT',decrement:'DECREMENT'})

found the problem at this time

At this time we need to bind parameters to the event

This solves it

Writing method 2 (array writing method)

    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
         ...mapMutations(['INCREMENT','DECREMENT']),

6 mapActions

First of all, introduce mapActions in vuex

    // 引入vuex身上的mapState和mapGetters和mapMutations和mapActions
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

Writing method 1 (object writing method)

 // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
 ...mapActions({incrementOdd:'incrementOdd',incrementOdd:'incrementOdd'}),

Writing method 2 (array writing method)

  // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
...mapActions(['incrementOdd','incrementWait']),

7 summary

1 mapState method: used to help us map statethe data into computed properties

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

2 mapGetters method: used to help us map gettersthe data into computed properties

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

3 mapActions method: the method used to help us generate and actionsdialogue, namely: the included $store.dispatch(xxx)function

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

4 mapMutations method: the method used to help us generate and mutationsdialogue, namely: the included $store.commit(xxx)function

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

Remarks: When using mapActions and mapMutations, if you need to pass parameters, you need to pass the parameters when binding the event in the template, otherwise the parameters are event objects.