vue3.0使用vuex的mapState、mapGetter、mapAction
参考大佬的封装方法,封装vuex的mapState、mapGetter、mapAction,更方便使用
新建useMapper.js
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();
const storeActionsFns = mapFn(mapper);
const storeAction = {};
Object.keys(storeActionsFns).forEach(fnKey => {
storeAction[fnKey] = storeActionsFns[fnKey].bind({ $store: store })
})
return storeAction
}
新建useState.js
/** 封装vuex的mapState方法 */
import { mapState, createNamespacedHelpers } from 'vuex'
import { useStateMapper } from './useMapper'
import {checkType} from '../index'
/**
*
* @param {*} moduleName 模块名称
* @param {*} mapper state属性集合 ['name', 'age']
* @returns
*/
export default function useState(moduleName, mapper) {
let mapperFn = mapState;
mapper = mapper;
// 如果使用模块化,则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapState方法
if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapState
}
// 如果只传了第一个参数并且是数组
if (checkType(moduleName) === "[object Array]" && moduleName) {
mapper = moduleName
}
return useStateMapper(mapper, mapperFn)
}
新建useGetters.js
/** 封装vuex的mapGetters方法 */
import { mapGetters, createNamespacedHelpers } from 'vuex'
import { useStateMapper } from './useMapper'
import {checkType} from '../index'
/**
*
* @param {*} moduleName 模块名称
* @param {*} mapper getters属性集合 ['name', 'age']
* @returns
*/
export default function useGetters(moduleName, mapper) {
let mapperFn = mapGetters;
// 如果使用模块化,则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapGetters方法
if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapGetters
}
return useStateMapper(mapper, mapperFn)
}
新建useActions.js
/** 封装vuex的mapActions方法 */
import { mapActions, createNamespacedHelpers } from 'vuex';
import {useActionMapper} from './useMapper'
import {checkType} from '../index'
/**
*
* @param {*} moduleName 模块名称
* @param {*} mapper 方法名集合 ['fn1', 'fn2']
* @returns
*/
export default function useActions(moduleName, mapper) {
let mapperFn = mapActions;
// 如果使用模块化,则使用vuex提供的createNamespacedHelpers方法找到对应模块的mapActions方法
if (checkType(moduleName) === "[object String]" && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapActions
}
return useActionMapper(mapper, mapperFn)
}
新建index.js,导出方法
export { default as useStoreState } from "./useState";
export { default as useStoreActions } from "./useActions";
export { default as useStoreGetters } from "./useGetters";
utils/index.js 公共方法
export function checkType(data) {
return Object.prototype.toString.call(data)
}
调用
<template>
<div class="home">
<span>姓名:{{name}} 年龄:{{age}} 性别:{{sex}}</span>
<button @click="changeName">改名</button>
</div>
</template>
<script>
import {useStoreState,useStoreActions} from '@/utils/storeState'
export default {
name: "home",
setup() {
const storeState = useStoreState('home', ['name', 'age', 'sex'])
/**
* 参数1:'home' 模块名称
* 参数2:['setName'] 当前模块里actions上定义的方法名称
*/
const storeActions = useStoreActions('home', ['setName'])
const changeName = () => {
storeActions.setName('李四')
}
return {
changeName,
...storeState,
...storeActions
};
},
};
</script>
文件目录截图