Vue3setup函数中使用Vuex中使用mapState和mapGetters的hooks
import { computed } from 'vue';
import { useStore } from 'vuex'
export function useMapper(mapper, mapFn) {
const store = useStore()
const storeDataFns = mapFn(mapper)
const storeData = {}
Object.keys(storeDataFns).forEach(fnKey => {
const fn = storeDataFns[fnKey].bind({$store: store});
storeData[fnKey] = computed(fn);
})
return storeData
}
mapState的使用
import { mapState, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'
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)
}
mapGetters的使用
import { mapGetters, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'
export function useGetters(moduleName, mapper) {
let mapperFn = mapGetters
if (typeof moduleName === 'string' && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapGetters
} else {
mapper = moduleName
}
return useMapper(mapper, mapperFn)
}
应用
<template>
<div>
<h2>{{homeCounter}}</h2>
<h2>{{doubleHomeCounter}}</h2>
<hr>
<!-- 没加namespaced: true,的写法 -->
<!-- <h2>{{$store.getters.doubleHomeCounter}}</h2> -->
<!-- 加了namespaced: true,后的写法 -->
<h2>{{$store.getters["home/doubleHomeCounter"]}}</h2>
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapGetters } = createNamespacedHelpers("home")
import { useState, useGetters } from '../hooks/index'
export default {
setup() {
const state = useState("home", ["homeCounter"])
const getters = useGetters("home", ["doubleHomeCounter"])
return {
...state,
...getters
}
}
}
</script>
<style scoped>
</style>