vue的輔助函數怎么使用

本篇內容主要講解“vue的輔助函數怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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'

使用方式

<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:{
    //原來的繼續保留
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ......
    //再維護vuex
    ...mapState({  //這里的...不是省略號了,是對象擴展符
        count:'count'
    })

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

到此，相信大家對“vue的輔助函數怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！