Vue3使用Vuex之mapState与mapGetters详解

<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对象：{token: ComputedRefImpl, username:ComputedRefImpl}
</script>

<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对象：{token: ComputedRefImpl, username:ComputedRefImpl}
</script>

import { computed } from 'vue';
/**
* 映射store对应的属性（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类型的对象
</script>