有关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的，多个好像无法响应
 */
function mapStates () {
    const store = useStore()
    if (arguments.length === 1) {
        let mapper = arguments[0]
        if (typeof mapper === "string" && mapper.length > 0) {
            return computed(() => store.state[mapper])
        }
        // 这边参数如果是数组的话，会出现页面数据无法响应式更新问题，希望有大佬帮忙解决
        if (mapper instanceof Array && mapper.length > 0) {
            let mappers = reactive({})
            mapper.forEach(item => {
                mappers[item] = mapStates(item)
            })
            return mappers
        }
    }
    console.error("使用方法有误，请检查输入参数的格式！")
    return null
}

/**
 * 自动映射store对应的Mutation方法
 * @returns {(function(*): void)|*|UnwrapNestedRefs<{}>|UnwrapNestedRefs<{}>}
 * @author 园丁
 * @date 2022/4/10
 * @example const {refreshVerificationCode} = mapMutations(["refreshVerificationCode"])
 */
function mapMutations () {
    const store = useStore()
    if (arguments.length === 1) {
        let mapper = arguments[0]
        if (typeof mapper === "string" && mapper.length > 0) {
            return param =>{
                store.commit(mapper, param)
            }
        }
        if (mapper instanceof Array && 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类型或格式错误！")
            return null
        }
        if (typeof mapper === "string" && mapper.length > 0) {
            let mapperName = moduleName + "/" + mapper
            return mapMutations(mapperName)
        }
        if (mapper instanceof Array && mapper.length > 0) {
            let mappers = reactive({})
            mapper.forEach(item => {
                mappers[item] = mapMutations(moduleName, item)
            })
            return mappers
        }
    }
    console.error("使用方法有误，请检查输入参数的格式！")
    return null
}

/**
 * 自动映射store对应的Action方法
 * @returns {(function(*): Promise<unknown>)|(function(*): Promise<unknown>)|UnwrapNestedRefs<{}>|*|UnwrapNestedRefs<{}>}
 * @author 园丁
 * @date 2022/4/10
 * @example const {refreshVerificationCode} = mapActions(["refreshVerificationCode"])
 */
function mapActions () {
    const store = useStore()
    if (arguments.length === 1) {
        let mapper = arguments[0]
        if (typeof mapper === "string" && mapper.length > 0) {
            return param =>{
                return new Promise((resolve, reject) => {
                    store.dispatch(mapper, param)
                        .then(res => resolve(res)).catch(err => reject(err))
                })
            }
        }
        if (mapper instanceof Array && mapper.length > 0) {
            let mappers = reactive({})
            mapper.forEach(item => {
                mappers[item] = mapActions(item)
            })
            return mappers
        }
    }
    console.error("使用方法有误，请检查输入参数的格式！")
    return null
}