@hzy1123581324/z-view-ui/hooks/store/useMapper.js

z-view-ui是使用vue3开发的组件，开发中,有部分组件功能未实现,慎用

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();
    // console.log(store);
    const storeActionsFns = mapFn(mapper);

    const storeAction = {};

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

    return storeAction
}


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

    const storeMutations = {};

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

    return storeMutations
}

export function useGettersMapper(mapper, mapFn) {
    // console.log(mapper,mapFn)
    const store = useStore();

    const storeMutationsFns = mapFn(mapper);
    console.log(storeMutationsFns)
    const storeGetters = {};

    Object.keys(storeMutationsFns).forEach(fnKey => {
        const fn = storeMutationsFns[fnKey].bind({ $store: store });
        console.log(fnKey,fn,'**********')
        storeGetters[fnKey] = computed(fn)
    })
    // Object.keys(storeMutationsFns).forEach(fnKey => {
    //     storeGetters[fnKey] = storeMutationsFns[fnKey].bind({ $store: store })
    // })

    return storeGetters
}