【Vue】Vuex的mapGetters和mapState的封装（公共逻辑提取）

代码结构

useMapper.js
目录： src/hooks/useMapper.js
这里将mapState和mapGetters的使用封装成方法

import { useStore } from "vuex";
import { computed } from "vue";
export function useMapper(mapper, mapFn) {
  const store = useStore();

  const storeStateFns = mapFn(mapper);

  // 数据转换
  const storeState = {};
  Object.keys(storeStateFns).forEach((fnKey) => {
    const fn = storeStateFns[fnKey].bind({ $store: store });
    storeState[fnKey] = computed(fn);
  });
  return storeState;
}

useGetters.js
目录： src/hooks/useGetters.js
mapGetters

// useGetters.js
import { mapGetters } from "vuex";
import { useMapper } from "./useMapper";

export function useState(mapper) {
  return useMapper(mapper, mapGetters);
}

useState.js
目录： src/hooks/useState.js
mapState

// useState.js
import { useMapper } from "./useMapper";
import { mapState } from "vuex";

export function useState(mapper) {
  return useMapper(mapper, mapState);
}

提示：

export default function()
export function useState() 的区别

引用时：
export default function()

import useState from '@/hooks/useState' 

export default useState()

import {useState} from '@/hooks/useState' 

上述两种混用会报错

module的解决方案

如果在项目复杂时，会用到module，封装需要进行修改
useState.js
目录： src/hooks/useState.js
mapState

// useState.js
import { useMapper } from "./useMapper";
import { mapState,createNamespacedHelpers } from "vuex";

export function useState(moduleName,mapper) {
  let mapperFn = mapState
  if(typeof moduleName === 'string' && moduleName.length > 0){
  	mapperFn = createNamespacedHelpers(moduleName).mapState
  }else{
  	mapper = moduleName
  }
  return useMapper(mapper, mapperFn);
}

useGetters.js
目录： src/hooks/useGetters.js
mapGetters

// useGetters.js
import { useMapper } from "./useMapper";
import { mapGetters,createNamespacedHelpers } from "vuex";

export function useState(moduleName,mapper) {
  let mapperFn = mapGetters
  if(typeof moduleName === 'string' && moduleName.length > 0){
  	mapperFn = createNamespacedHelpers(moduleName).mapGetters
  }else{
  	mapper = moduleName
  }
  return useMapper(mapper, mapperFn);
}

此外，需要在对应的module文件中编辑namespaced为true