快捷導(dǎo)航

VueX?mapGetters獲取Modules中的Getters方式

更新時間：2022年08月31日 16:16:49 作者：靜已思之愈濃

這篇文章主要介紹了VueX?mapGetters獲取Modules中的Getters方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

VueX mapGetters獲取Modules的Getters

注明 : permission 是你要獲取的Modules中的哪一個 (permission 即是模塊名);

? ? ? ? ...mapGetters("permission",[
? ? ? ? ? ? 'ReturnRoutes'
? ? ? ? ]),
?? ??? ?...mapGetters("模塊名",[
? ? ? ? ? ? '方法名'
? ? ? ? ]),

非輔助函數(shù)映射獲取方式 :

this.$store.getters["permission/ReturnRoutes"]
this.$store.getters["模塊名/方法名"]

permission 實際上傳入的是一個路徑(一般在Modules嵌套的情況下)

computed: {
? ...mapState('some/nested/module', {
? ? a: state => state.a,
? ? b: state => state.b
? })
},
methods: {
? ...mapActions('some/nested/module', [
? ? 'foo', // -> this.foo()
? ? 'bar' // -> this.bar()
? ])
};?? ??? ?

createNamespacedHelpers 命名空間輔助函數(shù), 來進行規(guī)定輔助函數(shù)的路徑

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
export default {
? computed: {
? ? // 在 `some/nested/module` 中查找
? ? ...mapState({
? ? ? a: state => state.a,
? ? ? b: state => state.b
? ? })
? },
? methods: {
? ? // 在 `some/nested/module` 中查找
? ? ...mapActions([
? ? ? 'foo',
? ? ? 'bar'
? ? ])
? }
}

各位碼友多讀文檔, 如果您有幸看到這篇文章, 說明您是吃了少讀文檔的虧, 和我一樣, 共勉~詳情請看 Vuex文檔

mapGetters的使用及簡單實現(xiàn)原理

項目中的mapGetters

在Vue項目的開發(fā)過程中必然會使用到vuex，對vue項目公用數(shù)據(jù)進行管理，從而解決組件之間數(shù)據(jù)相互通信的問題，如果不使用vuex，那么一些非父子組件之間的數(shù)據(jù)通信將會變得極為繁瑣。

1.這里首先說下項目中mapGetters的使用

先看下store部分目錄結(jié)構(gòu)

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import book from './mudules/book'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    book
  },
  getters
})

book.js文件

const book = {
  state: {
    number: 1
  },
  mutations: {
    SET_NUMBER: (state, number) => {
      state.number = number
    }
  },
  actions: {
    setNumber: ({commit, state}, number) => {
      // console.log(state.number, number)
      return commit('SET_NUMBER', number)
    }
  }
}
export default book

getters文件

const getters = {
  number: state => state.book.number
}
export default getters

在vue組件中

import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
    }，
    mounted () {
      this.$store.dispatch('setNumber',10).then(() => {
        console.log(this.number)
      })
    }
  }

通過引入mapGetters 我們就可以輕松的取到vuex中存儲的數(shù)據(jù)，從代碼中可以看出，getters就類似于vue組件中的computed（計算屬性），在組件中引入mapGetters就是將vuex中的數(shù)據(jù)映射到組件的計算屬性當(dāng)中，在組件不多，組件的數(shù)據(jù)通信不是很多的時候這樣寫看似將簡單的東西復(fù)雜化了，但是在稍復(fù)雜點的項目中這樣會極大的減少工作量，及組件之間數(shù)據(jù)傳遞的復(fù)雜程度。

mapGetters簡單實現(xiàn)原理

在上面的代碼中可能很多人在項目中用到過，但是對于其原理可能不是很理解。

可能有一部人對于在組件計算屬性中…mapGetters([‘number’]),不是很理解，下面就簡單寫一個方法實現(xiàn)類似的功能。

在組件中

 import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
      //...fn(['a', 'b', 'c'])      //需要實現(xiàn)這樣一個方法傳入一個數(shù)組
    },
    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取到相應(yīng)的值
    }
  }

我們在計算屬性中添加

…fn([‘a(chǎn)', ‘b'])

要求在組件中可以直接通過

this.a 和this.b 取到相應(yīng)的值

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)
    }
  }