有关vue3中vuex mapStates、mapMutations 和 mapActions的自定义方法

有关vue3中vuex mapStates、mapMutations 和 mapActions的自定义方法

重写原因：vue3中一般常用setup语法，会发现如果像vue2.0里一样使用vuex自带的mapStates、mapMutations和mapActions自动映射会发现效果并不如意，所以我就自定义了这三个方法，用来在vue3中setup使用。
代码如下：

import{useStore}from"vuex";import{reactive, computed}from"vue";export{
    mapStates, mapMutations, mapActions}/**
 * 自动映射store对应的state属性
 * @returns {ComputedRef<*>|null|UnwrapNestedRefs<{}>}
 * @author 园丁
 * @date 2022/4/10
 * @example const user = mapStates("user") 单个使用是OK的，多个好像无法响应
 */functionmapStates(){const store=useStore()if(arguments.length===1){let mapper= arguments[0]if(typeof mapper==="string"&& mapper.length>0){returncomputed(()=> store.state[mapper])}// 这边参数如果是数组的话，会出现页面数据无法响应式更新问题，希望有大佬帮忙解决if(mapperinstanceofArray&& mapper.length>0){let mappers=reactive({})
            mapper.forEach(item=>{
                mappers[item]=mapStates(item)})return mappers}}
    console.error("使用方法有误，请检查输入参数的格式！")returnnull}/**
 * 自动映射store对应的Mutation方法
 * @returns {(function(*): void)|*|UnwrapNestedRefs<{}>|UnwrapNestedRefs<{}>}
 * @author 园丁
 * @date 2022/4/10
 * @example const {refreshVerificationCode} = mapMutations(["refreshVerificationCode"])
 */functionmapMutations(){const store=useStore()if(arguments.length===1){let mapper= arguments[0]if(typeof mapper==="string"&& mapper.length>0){returnparam=>{
                store.commit(mapper, param)}}if(mapperinstanceofArray&& mapper.length>0){let mappers=reactive({})
            mapper.forEach(item=>{
                mappers[item]=mapMutations(item)})return mappers}}if(arguments.length===2){const moduleName= arguments[0]const mapper= arguments[1]if(typeof moduleName!=="string"){
            console.error("传入的moduleName类型或格式错误！")returnnull}if(typeof mapper==="string"&& mapper.length>0){let mapperName= moduleName+"/"+ mapperreturnmapMutations(mapperName)}if(mapperinstanceofArray&& mapper.length>0){let mappers=reactive({})
            mapper.forEach(item=>{
                mappers[item]=mapMutations(moduleName, item)})return mappers}}
    console.error("使用方法有误，请检查输入参数的格式！")returnnull}/**
 * 自动映射store对应的Action方法
 * @returns {(function(*): Promise<unknown>)|(function(*): Promise<unknown>)|UnwrapNestedRefs<{}>|*|UnwrapNestedRefs<{}>}
 * @author 园丁
 * @date 2022/4/10
 * @example const {refreshVerificationCode} = mapActions(["refreshVerificationCode"])
 */functionmapActions(){const store=useStore()if(arguments.length===1){let mapper= arguments[0]if(typeof mapper==="string"&& mapper.length>0){returnparam=>{returnnewPromise((resolve, reject)=>{
                    store.dispatch(mapper, param).then(res=>resolve(res)).catch(err=>reject(err))})}}if(mapperinstanceofArray&& mapper.length>0){let mappers=reactive({})
            mapper.forEach(item=>{
                mappers[item]=mapActions(item)})return mappers}}
    console.error("使用方法有误，请检查输入参数的格式！")returnnull}