vue3 在setup中使用mapState

mapState和computed结合在Vue3版本中使用，广大网友写了很多，这里只做一个实战后的应用笔记，不多赘述

创建一个hook

hooks/useMapState.ts

import { computed } from "vue"
import { mapState, useStore } from "vuex"
export default function (state:any) {
    // 1. 获取实例 $store
    const store = useStore()
    // 2. 遍历状态数据
    const storeStateFns = mapState(state)
    // 3. 存放处理好的数据对象
    const storeState = {}
    // 4. 对每个函数进行computed
    Object.keys(storeStateFns).forEach(fnKey => {
        const fn = storeStateFns[fnKey].bind({ $store: store })
        // 遍历生成这种数据结构 => {name: ref(), age: ref()}
        storeState[fnKey] = computed(fn)
    })
    return storeState
}

使用

<script lang="ts" setup>

import useMapState from "@/hooks/useMapState"

const myState:any = useMapState({
  includeList: (state: any) => state.keepAlive.includeList
})
const { includeList } = myState
</script>