快捷導(dǎo)航

VueX?mapGetters獲取Modules中的Getters方式

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

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

VueX mapGetters獲取Modules的Getters

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

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

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

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

permission 實(shí)際上傳入的是一個(gè)路徑(一般在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ù), 來(lái)進(jìn)行規(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'
? ? ])
? }
}

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

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

項(xiàng)目中的mapGetters

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

1.這里首先說(shuō)下項(xiàng)目中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)
      })
    }
  }

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

mapGetters簡(jiǎn)單實(shí)現(xiàn)原理

在上面的代碼中可能很多人在項(xiàng)目中用到過(guò)，但是對(duì)于其原理可能不是很理解。

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

在組件中

 import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
      //...fn(['a', 'b', 'c'])      //需要實(shí)現(xiàn)這樣一個(gè)方法傳入一個(gè)數(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)  // 在組件中可以直接通過(guò)this取到相應(yīng)的值
    }
  }

我們?cè)谟?jì)算屬性中添加

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

要求在組件中可以直接通過(guò)

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

打印結(jié)果為1，2，3

方法getters就類似于vuex中g(shù)etters，

方法fn與vuex中的mapGetters有著相似的功能，其實(shí)在vuex的底層中也是使用這樣類似的原理，這樣看上去是不是簡(jiǎn)單很多。

注：（...）是es6新增語(yǔ)法展開(kāi)運(yùn)算符，大體有兩個(gè)主要功能，收集參數(shù)與將數(shù)組表達(dá)式或者string在語(yǔ)法層面展開(kāi)。這里不做過(guò)多介紹

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化
這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化，對(duì)vue感興趣的同學(xué)，必須得參考下
2021-04-04
vue 內(nèi)聯(lián)樣式style中的background用法說(shuō)明
這篇文章主要介紹了vue 內(nèi)聯(lián)樣式style中的background用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Vue 提供了一種更通用的方式來(lái)觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng):偵聽(tīng)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue踩坑之Vue?Watch方法不能監(jiān)聽(tīng)到數(shù)組或?qū)ο笾档母淖兊南嚓P(guān)資料,需要的朋友可以參考下
2022-04-04

15 分鐘掌握vue-next響應(yīng)式原理

這篇文章主要介紹了15 分鐘掌握vue-next響應(yīng)式原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

2019-10-10

Vue實(shí)現(xiàn)瀏覽器端掃碼功能

本文主要介紹，通過(guò)使用基于 vue技術(shù)棧的前端開(kāi)發(fā)技術(shù)，在瀏覽器端調(diào)起攝像頭，并進(jìn)行掃碼識(shí)別功能，對(duì)識(shí)別到的二維碼進(jìn)行跳轉(zhuǎn)或其他操作處理，對(duì)vue瀏覽器掃碼功能的實(shí)現(xiàn)代碼感興趣的朋友一起看看吧

2021-10-10