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

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

1.Vue的輔助函數

mapState、mapGetters、mapActions、mapMutations

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

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

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

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

2.mapState 輔助函數

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

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

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

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

3.如何使用

在使用mapState之前,要導入這個輔助函數。

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) { // 用普通函數this指向vue實例,要注意       return this.str + ':' + state.from     },     // 注意下面的寫法看起來和上面相同,事實上箭頭函數的this指針并沒有指向vue實例,因此不要濫用箭頭函數     // 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函數的返回值,你可以用代碼中的三種方式去接收store中的值,具體可以看注釋。
如果我在后面想使用mapState怎么辦？其實很簡單

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

4.對象展開運算符

…mapState并不是mapState的擴展,而是…對象展開符的擴展 。

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

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

【