废话不多说直接上代码:
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");