有关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)|(function(*): Promise)|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}