在setup中使用mapState

首先新建一个hooks文件夹在文件夹下新建一个usestate.js

import { computed } from "vue";
import { mapState, useStore } from "vuex";


export function useState(mapper) {
    // 拿到store对象
    const store = useStore()

    // 获取到对应的对象的functions:{name:function,age:function}
    const storeStateFns = mapState(mapper)

    // 对数据进行转换
    const storeState = {}
    Object.keys(storeStateFns).forEach(fnkey => {
        const fn = storeStateFns[fnkey].bind({ $store: store });
        storeState[fnkey] = computed(fn)
    })

    return storeState
}

组件中使用时

先引入：

import { useState } from '../hooks/useState'

setup中：

setup(){
           const storeState=useState(["counter","name","age"])

            const storeState2=useState({
                sCounter:state=>state.name
            })

            return{
                ...storeState,
                ...storeState2
            }

        }