层次和约束：项目中使用vuex的3条优化方案 -凯发k8官方网

问题描述

使用vuex的store的过程中，发现了一些不是很优雅的地方：

store层module太多，找state、getter、mutation、action对应的module比较慢。

组件里面mapgetters、mapactions、mapmutations过多，分不清getter、action、mutation属于哪个module，比较混乱。

没有使用mutation type 和action type的枚举常量来约束action type和mutation type取值，字符串方式容易出错。（如上图）

凯发k8官方网的解决方案

针对这3个问题，制定了3条重构方案。

1. module聚类分层

按照聚类分层思想，当业务复杂后，需要通过一定的聚类特征对扁平化的结构进行分层。

这里按照数据的用途分了page、components、domain、other这四类，page存储页面组件的数据，components存储基础组件的数据，domain存储实体的数据，other存储其他全局数据。

之前的modules

之后的modules

目前还没有存储实体数据的module，所以暂时为空

2.module添加namespace

store划分module是因为不同的数据有不同的归属。

如果想要每个module都能响应全局action的话，不需要加namespace，但是我们并没有没有一个action对应多个module的action handler的情况。反而因为没有加namespace，导致组件里的多个module的getter、action、mutation都扁平的堆在一起，结构混乱、不清晰。

...mapmutations([changeisicetree: 'changeisicetree',changeicetreestatus: 'changeicetreestatus',showtoast: 'showtoast',changeremainingfronzetime: 'changeremainingfronzetime',decreaseremainingfronzetime: 'decreaseremainingfronzetime',changeicetreefadeout: 'changeicetreefadeout',changeicetreefadein: 'changeicetreefadein',changefrozentimes: 'changefrozentimes',changetreecurtime: 'changetreecurtime',changequicktreemedal:'changequicktreemedal',changequickhonormedal:"changequickhonormedal",updatepopupoptionstatus: 'updatepopupoptionstatus'}),

一堆的mutation让人迷惑，结构很不清晰，哪个mutation是哪个module必须去store中找。

加上namespace之后，每个mutaion属于一个namespace，每个namespace代表一个module，在组件里就可以轻松的根据namespace区分出哪个module来。

...mapgetters('aaaaa',['mutation111111','mutation22222','mutation33333' ]); ...mapmutations('aaaaa',['mutation111111','mutation22222','mutation33333' ]); ...mapmutations('bbbbb',['mutation4444444','mutation555555','mutation666666', ]);

这样重构之后，组件用到再多module的action、getter、mutation也不会混乱了。

3.mutation type和action type使用枚举常量约束

mutation type和action type的名字可能会写错，因为没有使用typescript，没有类型约束，如果写错了，编译时无法检查出来，只能在运行时检查。解决这个问题或者使用ts，或者全部的mutation type和action type从枚举常量中取。

store中的数据是模块化的，mutation type 和action type的枚举常量自然也是，但是vuex的module并不会处理这两者，想把这些模块化的motation type和action type挂到store实例上，可以通过vuex插件来解决。

我发现社区并没有我需要的vuex插件，于是我自己封装了一个

/*** 生成文件对应的模块* * @param {*} dirpath 文件夹路径*/ const generatemodules = (files) => {const modules = {}files.keys().foreach(key => {modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default})return modules; }/*** 所有file* */ const allfiles = {page: require.context('../modules/page', false, /\.js$/),components: require.context('../modules/components', false, /\.js$/),domain: require.context('../modules/domain', false, /\.js$/),other: require.context('../modules/other', false, /\.js$/) }/*** 所有module* */ const allmodules = {page: generatemodules(allfiles.page),components: generatemodules(allfiles.components),domain: generatemodules(allfiles.domain),other: generatemodules(allfiles.other) }/*** 根据types获取modules下的多个模块的结构化数据* @param {*} types module type* @param {*} fieldname 字段名*/ const getstructureddata = (types, fieldnames) => {const structureddata = {};types.foreach(type => {const modules = allmodules[type];const structuredmoduledata = object.keys(modules).map(modulename => {const fields = fieldnames.map(fieldname => modules[modulename][fieldname])return {[modulename]: object.assign(...fields)}});structureddata[type]= structuredmoduledata && structuredmoduledata.length ? object.assign(...structuredmoduledata): {};})return structureddata }const enumtypeplugin = store => {const mutationtypeenum = getstructureddata(['page','components','domain','other'], ['mutationtypes']);const actiontypeenum = getstructureddata(['page','components','domain','other'], ['actiontypes']);store.mutationtypes = mutationtypeenum;store.actiontypes = actiontypeenum; } module.exports = enumtypeplugin;

添加到vuex的plugins中

import typeenumplugin from './type-enum-plugin';new vuex.store(modules,plugins: [typeenumplugin] )

module定义时导出mutation types和action types

module.exports = {state,getters,mutations,actions,mutationtypes,actiontypes }

在组件里面就可以使用action type和mutation type来mapaction，mapmutation

...mapactions({mutation1: this.$store.mutationtypes.page.aaa.mutation1,mutation2: this.$store.mutationtypes.page.aaa.mutation2,mutation3: this.$store.mutationtypes.page.aaa.mutation3 }) ...mapactions({action1: this.$store.actiontypes.page.aaa.action1,action2: this.$store.actiontypes.page.aaa.action2,action3: this.$store.actiontypes.page.aaa.action3 })

或者像下面这样全部导入

...mapmutations(this.$store.mutationtypes.page.aaa) ...mapactions(this.$store.actiontypes.page.aaa)

这样就避免了手写字符串可能出错的问题。

总结

针对vuex store的module过多，组件里无法区分出getter、action、mutation属于哪一个module，mutation type和action type无约束这3个问题，针对性的提出了3条凯发k8官方网的解决方案：

module聚类分层，分成page、components、domain、other四个文件夹存放module；

添加namespace，组件中使用mapgetters、mapactions、mapmuatations时加上namespace区分；

module定义时导出mutation types和action types，并通过vuex的插件挂到store上，组件中使用mapmutations和mapactions不再通过字符串取对应值。

总结

以上是凯发k8官方网为你收集整理的层次和约束：项目中使用vuex的3条优化方案的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。