一招解决vue3使用vuex难题

90 阅读1分钟

废话不多说直接上代码:

import { computed } from "vue";
import { useStore, mapState, mapGetters, createNamespacedHelpers } from "vuex";

export default (operationName, mapper, moduleName) => {
  let storeStateFns = { mapState, mapGetters }[operationName](mapper);

  moduleName && (storeStateFns = createNamespacedHelpers(moduleName)[operationName](mapper));

  const storeState = {};
  for (const k in storeStateFns) {
    const fn = storeStateFns[k].bind({ $store: useStore() });
    storeState[k] = computed(fn);
  };
  return storeState;
};

base use

import useStoreMapper from "../src/hooks/useStoreMapper.js";

// 因为本质上mapState、mapGetters就已经支持write Object and Array了所以here可以直接用

const { name } = useStoreMapper("mapState", ["name"]);
const { name } = useStoreMapper("mapGetters", ["name"]);

const { mName } = useStoreMapper("mapState", {
  mName: ({ name }) => name,
}); 
const { mName } = useStoreMapper("mapGetters", {
  mName: "name",
});

存在module指定命名空间时使用示例

1. what operation 2. what get? 3. there get?

 const { age } = useStoreMapper("mapState", ["age"], "user");
 const { age } = useStoreMapper("mapGetters", ["age"], "user");