Vue3使用Vuex之mapState與mapGetters詳解

更新時(shí)間：2023年03月20日 14:06:09 作者：要吃早餐lhy

這篇文章主要為大家介紹了Vue3使用Vuex之mapState與mapGetters詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1.如何使用？

在Vue中我們可以通過(guò)點(diǎn)語(yǔ)法很容易的獲取到Vuex中state的值，但當(dāng)state數(shù)據(jù)比較多時(shí)，這樣很不方便，可以借助mapState映射來(lái)簡(jiǎn)化；由于目前vuex的官網(wǎng)中提供的是Vue2的demo，下面說(shuō)一下在Vue3中如何使用mapState。
假設(shè)：在Vuex中的state具有token和username屬性，現(xiàn)在要通過(guò)mapState取得token和username：

Vue3+JS

<script setup>
import { useStore, mapState } from "vuex";
import { computed } from "vue";
const store = useStore();
const mappers = mapState(["token", "username"]);
const mapData = {}
Object.keys(mappers).forEach((item) => {
    mapData[item] = computed(mappers[item].bind({ $store:store }));
});
console.log(mapData)
// ref類型的mapData對(duì)象：{token: ComputedRefImpl, username:ComputedRefImpl}
</script>

Vue3+TS（ps：建議直接使用pinia替代Vuex）

<script setup lang="ts">
import { useStore, mapState } from "vuex";
import { computed } from "vue";
import type { Ref } from 'vue'
type mappersType = {
    token:() => any,
    username:() => any,
    [propName:string]:any
}
type mapDataType = {
    token:Ref,
    username:Ref,
    [propName:string]:Ref
}
const store = useStore();
const mappers:mappersType = mapState(["token", "username"]) as mappersType
const mapData:mapDataType = {} as mapDataType;
Object.keys(mappers).forEach((item) => {
    mapData[item] = computed(mappers[item].bind({ $store:store }));
});
console.log(mapData)
// ref類型的mapData對(duì)象：{token: ComputedRefImpl, username:ComputedRefImpl}
</script>

2.代碼封裝

storeMap.js

import { computed } from 'vue';
/**
* 映射store對(duì)應(yīng)的屬性（mapState｜mapGetters）
* @param $store useStore()
* @param mappers mapState([])｜mapGetters([])
* @returns {[propName:string]: ComputedRefImpl,...}
*/
function getStoreMap($store, mappers) {
    const mapData = {}
    Object.keys(mappers).forEach((item) => {
    mapData[item] = computed(mappers[item].bind({ $store })).value;
    });
    return mapData;
}
export { getStoreMap }

使用

<script setup>
import { useStore, mapState, mapGetters } from "vuex";
import { getStoreMap } from './storeMap'
const store = useStore();
const mappers = mapState(["token", "username"]);
// const mappers = mapGetters(["getToken", "getUsername"]); //也可以獲取mapGetters
const mapData = getStoreMap(store, mappers)
console.log(mapData) // 包含state或getters屬性的ref類型的對(duì)象
</script>

3.解題思路

以下是我的一種比較取巧的解題思路，可酌情參考

延用上面的例子
首先，我們先導(dǎo)入mapState，并創(chuàng)建一個(gè)空的mapState對(duì)象，將鼠標(biāo)移動(dòng)至mapState()上查看

可以看到mapState接收的是一個(gè)字符串類型的數(shù)組，返回的是一個(gè)屬性為string類型，值為Computed類型的對(duì)象，可推導(dǎo)這里mapState接收的應(yīng)是["token", "username"]。
const mappers = mapState(["token", "username"]);

再次將鼠標(biāo)移動(dòng)至mappers上，查看mappers類型

可以看到mappers是一個(gè)對(duì)象；
console.log(mappers.token)查看屬性token屬性的值是什么

可以看到mappers.token是一個(gè)方法；
通過(guò)console.log(mappers.token())調(diào)用輸出這個(gè)方法,發(fā)現(xiàn)瀏覽器的控制臺(tái)報(bào)錯(cuò)了

錯(cuò)誤提示Cannot read properties of undefined (reading 'state')，點(diǎn)擊上圖藍(lán)色箭頭處查看報(bào)錯(cuò)的源代碼

可以看出整個(gè)截圖部分是mapState對(duì)象，我們執(zhí)行mappers.token()是圖中標(biāo)紅的區(qū)域，再結(jié)合報(bào)錯(cuò)信息可知報(bào)錯(cuò)是因?yàn)檫@里的this對(duì)象沒有$store屬性。
由于this中只有$store被使用，并沒有用到this的其他屬性，則可以通過(guò)bind方式，手動(dòng)傳一個(gè)具有store屬性的this對(duì)象進(jìn)去，并輸出調(diào)用