vuex中mapGetters的使用及簡單實現原理

一、mapGetters簡介

在Vue項目的開發過程必然會用到vuex，對vue項目公用數據進行管理，從而解決組件之間數據相互通信的問題，從而簡化了非父子組件之間的數據通信。

二、在項目中mapGetters的使用

　　1. store部分的目錄結構

　　　　　　

　　2. index.js

　　　　　　

 

 

 　　3. setting.js

　　　　

 

 

 　　4. getters.js

　　　　

 

 

 　　5. 在vue組件中

　　　　

 

 

 

 通過引入mapGetters，就可以輕松的取到vuex中存儲的數據，從代碼中可以看出，getters就類似於vue組件中的computed(計算屬性)，在組件中引入mapGetters就是將vuex中的數據映射到組件的計算屬性當中。

　　在組件不多，組件的數據通信不是很多時，會變得復雜化。

　　在復雜的項目中會極大的減少工作量，及組件之間數據傳遞的復雜程度。

三、Getters簡單實現原理

　　在組件中

import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
      //...fn(['a', 'b', 'c'])      //需要實現這樣一個方法傳入一個數組
    },
    methods: {
      menuClick (key) {
        if (key === 0) {
          this.$router.push('/ebook')
        }else if (key === 1) {
          this.$router.push('/datachart')
        }else{
          return
        }
        
      }
    },
    mounted () {
      this.$store.dispatch('setNumber',10).then(() => {
        console.log(this.number)
      })
      // console.log(this.a,this.b,this.c)  // 在組件中可以直接通過this取到相應的值
    }
  }

我們在計算屬性中添加
…fn([‘a’, ‘b’])

要求在組件中可以直接通過
this.a 和this.b 取到相應的值

const getters = {
    a: () => 1,
    b: () => 2,
    c: () => 3
  }
  function fn (keys) {
    const data = {}
    keys.forEach(key => {
      if (getters.hasOwnProperty(key)) {
        data[key] = getters[key]
      }
    });
    return data
  }
  
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
      ...fn(['a', 'b', 'c'])
    },
    mounted () {
      this.$store.dispatch('setNumber',10).then(() => {
        console.log(this.number)
      })
      console.log(this.a,this.b,this.c)
    }
  }

打印結果為1，2，3
方法getters就類似於vuex中getters，
方法fn與vuex中的mapGetters有着相似的功能，其實在vuex的底層中也是使用這樣類似的原理

注：（...）是es6新增語法展開運算符，大體有兩個主要功能，收集參數與將數組表達式或者string在語法層面 展開。