vue3.0使用vuex的mapState、mapGetter、mapAction、mapMutations

在src目录下面新建文件夹utils或者（hook）

在utils（hook）里面里面新建文件夹storeState里面新建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
}

在utils（hook）里面里面新建文件夹storeState里面新建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方法找到对应?？榈膍apState方法
    if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {
        mapperFn = createNamespacedHelpers(moduleName).mapState
    }
    // 如果只传了第一个参数并且是数组
    if (checkType(moduleName) === "[object Array]" && moduleName) {
        mapper = moduleName
    }
    
    return useStateMapper(mapper, mapperFn)
}

在utils（hook）里面里面新建文件夹storeState里面新建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;
    
    // 如果使用?？榛蚴褂胿uex提供的createNamespacedHelpers方法找到对应?？榈膍apGetters方法
    if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {
        mapperFn = createNamespacedHelpers(moduleName).mapGetters
    }

    return useStateMapper(mapper, mapperFn)
}

在utils（hook）里面里面新建文件夹storeState里面新建mapMutations.js

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

import { mapMutations, 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 = mapMutations;
    // 如果使用?？榛?，则使用vuex提供的createNamespacedHelpers方法找到对应?？榈膍apMutations方法
    if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {
        mapperFn = createNamespacedHelpers(moduleName).mapMutations
    }
    return useActionMapper(mapper, mapperFn)
}

在utils（hook）里面里面新建文件夹storeState里面新建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)
}

在文件夹storeState里面新建index.js，导出方法

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

utils（hook）里面新建index.js 公共方法

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

调用

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    {{name}}
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import {useStoreState} from '@/utils（hook）/storeState'
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  setup() {
    const storeState = useStoreState('home',['name'])
    return {
        ...storeState
    }
  }
}
</script>