前言：
vue3.0已经是工作中的常态了， 使用中总感觉用vuex 挺不方便的。
举例：
import {
ref, watch, computed } from 'vue';
import {
useStore, mapGetters } from 'vuex';
import {
mapType } from '../../utils/dataType';
const lightOri = ref(2);
setTimeout(() => {
lightOri.value += 10;
},2)
const store = useStore();
store.commit('common/setLogin', true);
const light = computed(() => lightOri.value + 2);
watch(lightOri, (newVal, oldVal) => {
console.log('watch');
},
{
immediate: true
}
)
- 感觉不是很方便，于是进行封装。
思路
- 使用mapGetters 等语法糖进行获取相应的方法，
- 返回相应的方法函数
实现
- 定义方法
useWapper(list: any, type: mapType, module?: string)
传入名字list， 类型为getters， actions， 模块方法
- mapType
export enum mapType {
"STATE",
"GETTERS",
'MUTATIONS',
'ACTIONS'
}
- 初始化存储数据
const store = useStore();
const storeObj: keyofObj<Function> = {
};
const storeFuns = this.getMapFuncs(type, list, module);
获取vuex对象
- 创建一个对象用于存储 {string: Function}
- 处理完的方法修改store的指针地址
- 处理方法进行二次处理
- 上代码直接点
完整代码
import {
mapActions, mapGetters, mapState, mapMutations, useStore, createNamespacedHelpers } from 'vuex';
import {
computed } from 'vue';
import {
keyofObj, mapType, moduleType } from './dataType';
class mapWapper {
static useWapper(list: any, type: mapType, module?: string) {
const store = useStore();
const storeObj: keyofObj<Function> = {
};
const storeFuns = this.getMapFuncs(type, list, module);
console.log(storeFuns);
Object.keys(storeFuns).forEach(funcKey => {
const fn = storeFuns[funcKey].bind({
$store: store});
console.log(fn);
storeObj[funcKey] = this.handlerFunc(fn, type);
})
return storeObj;
}
static handlerFunc(fn: any, type: mapType) {
switch(type){
case mapType.STATE:
return computed(fn);
default:
return fn;
}
}
static getMapFuncs(type: mapType, list: any, module?: string) {
// 获取mapgetters
let moduleFun = null;
let moduleExd = null;
if(module) {
moduleExd = createNamespacedHelpers(module)
}
switch(type){
case mapType.STATE:
moduleFun = moduleExd? moduleExd.mapState: mapState;
break;
case mapType.GETTERS:
moduleFun = moduleExd? moduleExd.mapGetters: mapGetters;
break;
case mapType.MUTATIONS:
moduleFun = moduleExd? moduleExd.mapMutations: mapMutations;
break;
case mapType.ACTIONS:
moduleFun = moduleExd? moduleExd.mapActions: mapActions;
break;
}
return moduleFun(list);
}
}
export default mapWapper;
使用
const {
getLogin , getTheme } = mapWapper.useWapper(['getLogin', 'getTheme'], mapType.GETTERS, "common")
const {
setLogin , setTheme } = mapWapper.useWapper(['setLogin', 'setTheme'], mapType.MUTATIONS, "common")
setLogin('hhh')
console.log(getLogin())
效果
成功修改