vue的輔助函數有哪些

vue的輔助函數有：1、mapState，將全域狀態管理的state值對應到元件的計算屬性；2、mapGetters，將全域狀態管理的getters值對應到元件的計算屬性；3、 mapActions；4、mapMutations。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

1.Vue的輔助函數

##mapState、mapGetters、mapActions、mapMutations

• mapState 將全域狀態管理的state值對應到元件的計算屬性

• mapGetters 將全域狀態管理的getters值對應到元件的計算屬性

##mapMutation 將mutation的值對應到方法裡
mapActions 將actions裡的值對應到方法裡
2.mapState 輔助函數

mapState是什麼？官方的解釋是:當一個元件需要取得多個狀態時候，將這些狀態都宣告為計算屬性會有些重複且冗餘。為了解決這個問題，我們可以使用 mapState 輔助函數來幫助我們產生計算屬性，讓你少按幾次鍵
當初在看到這個解釋的時候可能覺得非常空洞，難以理解。生成計算屬性是什麼？少按幾次鍵？ ？ ？

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

3.如何使用

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

import { mapState } from 'vuex'

使用方式

<script>
import { mapState } from &amp;#39;vuex&amp;#39;
export default {
  data () {
    return {
      str: &#39;国籍&#39;,
      dataCount: this.$store.state.count
    }
  },
  computed: mapState({
    count: &#39;count&#39;, // 第一种写法
    sex: (state) => state.sex, // 第二种写法
    from: function (state) { // 用普通函数this指向vue实例,要注意
      return this.str + &#39;:&#39; + state.from
    },
    // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
    // from: (state) => this.str + &#39;:&#39; + state.from
    myCmpted: function () {
      // 这里不需要state,测试一下computed的原有用法
      return &#39;测试&#39; + this.str
    }
  }),
  methods: {
    increment () {
      this.$store.commit(&#39;increment&#39;)
    },
    decrement () {
      this.$store.commit(&#39;decrement&#39;)
    }
  }
}
</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:{
    //原来的继续保留
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ......
    //再维护vuex
    ...mapState({  //这里的...不是省略号了,是对象扩展符
        count:'count'
    })

######mapState###、###mapGetters###、###mapActions###、###mapMutations###的使用方法大同小異。 。 。 ######【相關推薦：《###vue.js教學###》】###

以上是vue的輔助函數有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！