[JavaScript知识库]vue3.0 封装vuex的mapState、mapGetter、mapAction

vue3.0使用vuex的mapState、mapGetter、mapAction
参考大佬的封装方法，封装vuex的mapState、mapGetter、mapAction，更方便使用

新建useMapper.js

import { useStore } from 'vuex'
import { computed } from 'vue'

export function useStateMapper(mapper, mapFn) {
    const store = useStore();

    const storeStateFns = mapFn(mapper);

    const storeState = {};
    Object.keys(storeStateFns).forEach(fnKey => {
        // vuex源码中mapState和mapGetters的方法中使用的是this.$store,所以更改this绑定
        const fn = storeStateFns[fnKey].bind({ $store: store });
        storeState[fnKey] = computed(fn)

    })

    return storeState
}

export function useActionMapper(mapper, mapFn) {
    const store = useStore();
    
    const storeActionsFns = mapFn(mapper);

    const storeAction = {};

    Object.keys(storeActionsFns).forEach(fnKey => {
        storeAction[fnKey] = storeActionsFns[fnKey].bind({ $store: store })
    })

    return storeAction
}

新建useState.js

/** 封装vuex的mapState方法 */

import { mapState, createNamespacedHelpers } from 'vuex'

import { useStateMapper } from './useMapper'
import {checkType} from '../index'
/**
 * 
 * @param {*} moduleName 模块名称
 * @param {*} mapper state属性集合 ['name', 'age']
 * @returns 
 */
export default function useState(moduleName, mapper) {
    let mapperFn = mapState;
    mapper = mapper;
    
	// 如果使用模块化，则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapState方法
    if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {
        mapperFn = createNamespacedHelpers(moduleName).mapState
    }
    // 如果只传了第一个参数并且是数组
    if (checkType(moduleName) === "[object Array]" && moduleName) {
        mapper = moduleName
    }
    
    return useStateMapper(mapper, mapperFn)
}

新建useGetters.js

/** 封装vuex的mapGetters方法 */

import { mapGetters, createNamespacedHelpers } from 'vuex'

import { useStateMapper } from './useMapper'
import {checkType} from '../index'
/**
 * 
 * @param {*} moduleName 模块名称
 * @param {*} mapper getters属性集合 ['name', 'age']
 * @returns 
 */
export default function useGetters(moduleName, mapper) {
    let mapperFn = mapGetters;
    
	// 如果使用模块化，则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapGetters方法
    if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {
        mapperFn = createNamespacedHelpers(moduleName).mapGetters
    }

    return useStateMapper(mapper, mapperFn)
}

新建useActions.js

/** 封装vuex的mapActions方法 */

import { mapActions, createNamespacedHelpers } from 'vuex';
import {useActionMapper} from './useMapper'
import {checkType} from '../index'
/**
 * 
 * @param {*} moduleName 模块名称
 * @param {*} mapper 方法名集合 ['fn1', 'fn2']
 * @returns 
 */
export default function useActions(moduleName, mapper) {
    let mapperFn = mapActions;
    
	// 如果使用模块化，则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapActions方法
    if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {
        mapperFn = createNamespacedHelpers(moduleName).mapActions
    }

    return useActionMapper(mapper, mapperFn)
}

新建index.js，导出方法

export { default as useStoreState } from "./useState";
export { default as useStoreActions } from "./useActions";
export { default as useStoreGetters } from "./useGetters";

utils/index.js 公共方法

export function checkType(data) {
  return Object.prototype.toString.call(data)
}

调用

<template>
    <div class="home">
        <span>姓名：{{name}} 年龄：{{age}} 性别：{{sex}}</span>
        <button @click="changeName">改名</button>
    </div>
</template>

<script>
import {useStoreState,useStoreActions} from '@/utils/storeState'

export default {
    name: "home",
    setup() {
        const storeState = useStoreState('home', ['name', 'age', 'sex'])
        /**
         * 参数1：'home'  模块名称
         * 参数2：['setName']  当前模块里actions上定义的方法名称
        */
        const storeActions = useStoreActions('home', ['setName'])
        const changeName = () => {
            storeActions.setName('李四')
        }
        return {
            changeName,
            ...storeState,
            ...storeActions
        };
    },
};
</script>

文件目录截图