前言

vuex作为跨组件通信的利器,在开发复杂应用过程中必不可少.但vuex在组件中渲染状态和调用action和mutation的语法过于繁琐,严重影响开发效率.

本文借助vue3提出的hook思想对vuex进行封装,使其使用起来更加快捷高效.从而使前端同学能更加关注业务本身,而少写样板代码(源代码贴在了文尾).

vuex的基础使用

配置

vuex 4相当于3版本没有多大的区别,4版本增加了ts的支持和Composition Api.

配置之初,在项目根目录下执行命令安装vuex.

yarn add vuex@next --save

新建src/store/index.ts开始配置vuex(代码如下).

createStore函数用于创建仓库,根模块下定义了一个状态content,并且配置了一个子模块HomePage.

import { createStore } from 'vuex';
import { m as HomePage } from './modules/HomePage';
import { RootState } from './store';export default createStore<RootState>({state:{content:"hello guy" },modules:{HomePage}
});

为了能使用ts的特性,创建仓库时还需要定义一份类型文件,src/store/store.d.ts代码如下.

import { HomeType } from "./modules/HomePage";export interface RootState {  //根模块content:string
}export interface ModuleState { // 子模块HomePage:HomeType
}

根模块配置完成,子模块src/store/modules/HomePage配置代码如下.

子模块HomePage定义了两个状态、一个action和一个mutation.通过Module将HomeType和RootState类型引入后,在编写action或者mutation函数时会出现智能提示.

import { RootState } from "@/store/store";
import { Module } from "vuex";export interface HomeType {name:string,age:number
}export const m:Module<HomeType,RootState> = {namespaced:true, state: {name:"hello world",age:18},mutations:{incrementAge (state) {state.age = 3;}  },actions:{increment({ state, commit, rootState }) {commit('incrementAge')}}
}

以上两步就轻松将根模块和子模块配置完了,但当前配置在页面调用vuex时并不能出现智能提示,还需要添加下面两步.

第一步在原来的类型文件src/store/store.d.ts添加一个接口AllState,继承根模块和子模块的状态.

import { HomeType } from "./modules/HomePage";
import { GlobalType } from "./modules/Global";export interface RootState {content:string
}export interface ModuleState {HomePage:HomeType,Global:GlobalType
}export interface AllState extends RootState,ModuleState {}

第二步在原来配置vuex的主文件中额外添加一个变量key和函数useStore,并将类型RootState和AllState添加进去.

import { createStore, Store, useStore as baseStore } from 'vuex';
import { m as HomePage } from './modules/HomePage';
import { RootState,AllState } from './store';
import { InjectionKey } from 'vue';export default createStore<RootState>({state:{content:"hello guy" },modules:{HomePage}
});export const key:InjectionKey<Store<RootState>> = Symbol(); //定义一个keyexport function useStore() {return baseStore<AllState>(key);
}  

安装

上述配置结束后,现在需要将vuex引入到项目.

在项目入口文件main.ts使用use将vuex安装到应用中,并且传入定义好的key.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store,{key} from './store'const app = createApp(App)
app.use(store,key).use(router).mount('#app')

调用

vuex成功引入到应用后,页面组件就能够获取vuex定义的状态了.

首先在页面组件引入上面定义好的useStore方法,通过执行useStore获取store对象（代码如下）.

此时在编辑器中使用store对象拿数据时能够弹出智能提示(如下图).

store对象通过state属性可以往下寻找,直至找到想要的状态再通过computed包裹返回.此时包裹的状态就能够在页面上呈现被具备响应式特性.

另外store对象调用dispatch和commit就可以执行action和mutation相关方法.但调用子模块定义的方法时,需要拼接模块名(如HomePage/increment).

<template><p @click="hanlder">点击{{age}}</p>
</template><script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from "@/store";
export default defineComponent({name: 'Home',setup() {const store = useStore();const hanlder = ()=>{ // 触发事件store.dispatch("HomePage/increment");}const age = computed(()=>{return store.state.HomePage.age;})return {hanlder,age}}
})
</script>

上述调用方式可正常使用,但vuex中定义的状态和方法一旦数量剧增,页面调用时会变得十分繁琐,下一小节将介绍如果简化vuex的调用.

vuex的封装

state封装

vue3提出的hook思想能将逻辑代码抽离出来封装复用,我们可以利用这一特性先对state进行改造.

新建文件src/hook/useState.ts(代码如下).

useState第一个参数module_name为模块名称,第二个参数wrapper是需要获取的状态.

调用形式如useState('HomePage', ['name', 'age']),执行后返回HomePage模块下的name和age的值.

如果module_name不传值,useState将直接获取根模块下定义的状态.

useState整体实现逻辑很简单(代码如下),利用vuex提供的mapState和createNamespacedHelpers能够获取根模块和子模块下的状态,再使用computed包裹一层组合成对象返回.

import { mapState, createNamespacedHelpers } from "vuex";
import { computed, ComputedRef } from "vue";
import { ModuleState } from "@/store/store";
import { useStore } from "@/store";/*** 对store导出数据做封装*/
export const useState = (module_name:keyof ModuleState | string[],wrapper:string[] = [])=>{const store = useStore();let mapFn = mapState;if(typeof module_name === "string"){ // 访问子模块的状态mapFn = createNamespacedHelpers(module_name).mapState;}else{  // 访问RootStatewrapper = module_name;}const storeStateFns = mapFn(wrapper);// 对数据进行转换const storeState:{ [key:string]: ComputedRef<any>} = {};// 使用computed将状态包裹一层再返回Object.keys(storeStateFns).forEach(fnKey => {const fn = storeStateFns[fnKey].bind({$store: store}) // 不绑定store,vuex执行时会报错storeState[fnKey] = computed(fn)})return storeState;}

hook函数编写完成后,页面组件就可以调用获取状态了(代码如下).

从下面代码可以看出,利用useState获取vuex中的数据变的非常简单,只需要传入模块名称和状态名称就可以快速拿到数据(vuex中定义的子模块必须要加上namespaced:true,否则状态获取会失效).

useState函数如果不传入模块名,直接传入数组形如const rootState = useState(['content']),返回的rootState对象装载着根模块下定义的content值.

<template><p>{{name}}</p><div>{{age}}</div>
</template><script lang="ts">
import { defineComponent } from 'vue'
import { useState } from '@/hook/useState'export default defineComponent({setup() {const state = useState('HomePage', ['name', 'age']);return {...state}},
})
</script>

Getter封装

假如vuex中定义了getters如下,getName用于获取name值的反转.

export const m:Module<HomeType,RootState> = {namespaced:true, state: {name:"hello world",age:18},getters:{getName(state){return state.name.split("").reverse().join("");}}
}

Getter封装的原理和state非常相似(可以将两者抽离公共代码复用),利用vuex提供mapGetters和createNamespacedHelpers获取根模块和子模块下定义的Getter函数,再使用computed包裹组装成对象返回.

// src/hook/useGetter.tsimport { mapGetters, createNamespacedHelpers } from "vuex";
import { computed, ComputedRef } from "vue";
import { ModuleState } from "@/store/store";
import { useStore } from "@/store";/*** 对getters做封装*/
export const useGetter = (module_name:keyof ModuleState | string[],wrapper:string[] = [])=>{const store = useStore();let mapFn = mapGetters;if(typeof module_name === "string"){ // 访问子模块的gettermapFn = createNamespacedHelpers(module_name).mapGetters;}else{  // 访问根模块的getterwrapper = module_name;}const storeGettersFns = mapFn(wrapper);// 对数据进行转换const storeGetter:{ [key:string]: ComputedRef<any>} = {};// 使用computed将状态包裹一层再返回Object.keys(storeGettersFns).forEach(fnKey => {const fn = storeGettersFns[fnKey].bind({$store: store})storeGetter[fnKey] = computed(fn)})return storeGetter;}

页面调用方式如下,useGetter函数传入模块名称和属性返回getters.

<template><p>{{getName}}</p>
</template><script lang="ts">
import { defineComponent } from 'vue'
import { useGetter } from "@/hook/useGetter";export default defineComponent({setup() {const getters = useGetter('HomePage',["getName"]);return {...getters}},
})
</script>

action和mutation封装

为了让action和mutation调用起来更加方便,创建hook函数useMethod将两者封装到一起.

页面调用形式形如const [actions, mutations] = useMethod('HomePage', ['increment','incrementAge']).

useMethod第一个参数填写模块名称,第二个参数填写方法名称.最终返回的actions和mutations会去HomePage模块下寻找有没有定义increment和incrementAge方法.寻找成功就将方法封装成对象返回.

useMethod函数代码如下.实现原理是利用vuex提供的mapActions和mapMutations获取根模块或者子模块下定义的action和mutation.然后通过store._modules.root._rawModule找到开发者编写的vuex配置代码.

通过配置中定义的action和mutation过滤掉那些不存在的方法名,最后将方法都组合成action和mutation对象,以数组的形式返回.(由于官方没有提供api通过store对象获取vuex的配置代码,这里是通过私有属性store._modules.root._rawModule拿到的,目前vuex 4.0.0版本支持此做法,如果获取不到请确认vuex版本号)

import { ModuleState } from "@/store/store";
import { mapActions,mapMutations } from "vuex";
import { useStore } from "@/store";export const useMethod = (module_name:keyof ModuleState | string[],wrapper:string[] = [])=>{const store = useStore();// @ts-ignorelet options = store._modules.root._rawModule; // 获取根模块的配置if(typeof module_name === "string"){options = options.modules[module_name]; // 获取子模块的配置}else{wrapper = module_name;}const { mutations = {},actions = {}  } = options;const mutation_keys = Object.keys(mutations);const action_keys = Object.keys(actions);const action_wrapper:string[] = [];const mutation_wrapper:string[] = []; wrapper.forEach((item)=>{ // 过滤掉原始配置中不包含的方法if(mutation_keys.includes(item)){mutation_wrapper.push(item);}if(action_keys.includes(item)){action_wrapper.push(item);}})const aactions =  typeof module_name === "string"?mapActions(module_name, action_wrapper):mapActions(action_wrapper);const mmutations = typeof module_name === "string"?mapMutations(module_name,mutation_wrapper):mapMutations(mutation_wrapper);bindStore([aactions,mmutations]); // 不绑定store,vuex执行时会报错return [aactions,mmutations];
}function bindStore(list:any[]){const store = useStore() as any;list.forEach((item)=>{for(let key in item){item[key] = item[key].bind({$store:store});}   })
}

hook函数编写完成后,页面调用形式如下.

useMethod执行后以数组的形式返回actions和mutations对象.而页面组件需要调用的action和mutation都位于这两个对象下,直接执行对象下的函数即可调用相应的action或mutation(遗憾的是目前没有找到hook函数中对ts的支持写法,因此返回的结果无法使用智能提示).

<template><el-button @click="actions.increment">{{name}}</el-button><div @click="mutations.incrementAge">age:{{age}}</div>
</template><script lang="ts">
import { defineComponent } from 'vue'
import { useMethod } from '@/hook/useMethod'export default defineComponent({name: 'Home',setup() {const state = useState('HomePage', ['name', 'age']);const [actions, mutations] = useMethod('HomePage', ['increment','incrementAge',])return {actions,mutations,...state}},
})
</script>

源代码

仓库地址