vue的輔助函數(shù)有：1、mapState，將全局狀態(tài)管理的state值映射到組件的計(jì)算屬性；2、mapGetters，將全局狀態(tài)管理的getters值映射到組件的計(jì)算屬性；3、mapActions；4、mapMutations。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

1.Vue的輔助函數(shù)

mapState、mapGetters、mapActions、mapMutations

• mapState 將全局狀態(tài)管理的state值映射到組件的計(jì)算屬性

• mapGetters 將全局狀態(tài)管理的getters值映射到組件的計(jì)算屬性

• mapMutation 將mutation的值映射到方法里

• mapActions 將actions里的值映射到方法里

2.mapState 輔助函數(shù)

mapState是什么？官方的解釋是:

當(dāng)一個組件需要獲取多個狀態(tài)時候，將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵

當(dāng)初在看到這個解釋的時候可能覺得非常空洞，難以理解。生成計(jì)算屬性是什么？少按幾次鍵？？？

mapState是state的語法糖,什么是語法糖?我對語法糖的理解就是,我明明已經(jīng)對一種操作很熟練了,并且這種操作也不存在什么問題,為什么要用所謂的"更好,更好的操作"？,用了一段時間后,真香!

3.如何使用

在使用mapState之前,要導(dǎo)入這個輔助函數(shù)。

import { mapState } from 'vuex'

使用方式

<template>   <div id="example">     <button @click="decrement">-</button>     {{count}}     {{dataCount}}     <button @click="increment">+</button>     <div>{{sex}}</div>     <div>{{from}}</div>     <div>{{myCmpted}}</div>   </div> </template> <script> import { mapState } from 'vuex' export default {   data () {     return {       str: '國籍',       dataCount: this.$store.state.count     }   },   computed: mapState({     count: 'count', // 第一種寫法     sex: (state) => state.sex, // 第二種寫法     from: function (state) { // 用普通函數(shù)this指向vue實(shí)例,要注意       return this.str + ':' + state.from     },     // 注意下面的寫法看起來和上面相同,事實(shí)上箭頭函數(shù)的this指針并沒有指向vue實(shí)例,因此不要濫用箭頭函數(shù)     // from: (state) => this.str + ':' + state.from     myCmpted: function () {       // 這里不需要state,測試一下computed的原有用法       return '測試' + this.str     }   }),   methods: {     increment () {       this.$store.commit('increment')     },     decrement () {       this.$store.commit('decrement')     }   } } </script>

computed可以接收mapState函數(shù)的返回值,你可以用代碼中的三種方式去接收store中的值,具體可以看注釋。
如果我在后面想使用mapState怎么辦？其實(shí)很簡單

//之前的computed computed:{     fn1(){ return ...},     fn2(){ return ...},     fn3(){ return ...}     ........ } //引入mapState輔助函數(shù)之后   computed:mapState({     //先復(fù)制粘貼     fn1(){ return ...},     fn2(){ return ...},     fn3(){ return ...}     ......     //再維護(hù)vuex     count:'count'     })

4.對象展開運(yùn)算符

…mapState并不是mapState的擴(kuò)展,而是…對象展開符的擴(kuò)展 。

//之前的computed computed:{     fn1(){ return ...},     fn2(){ return ...},     fn3(){ return ...}     ........ } //引入mapState輔助函數(shù)之后   computed:{     //原來的繼續(xù)保留     fn1(){ return ...},     fn2(){ return ...},     fn3(){ return ...}     ......     //再維護(hù)vuex     ...mapState({  //這里的...不是省略號了,是對象擴(kuò)展符         count:'count'     })

mapState、mapGetters、mapActions、mapMutations的使用方法大同小異。。。

【