复杂交互的项目使用vuex如何更好的组织代码

前言

阅读之前希望你有vuex的基础知识以及拥有一定的项目经验。

最近一年左右做一个视频在线编辑的项目，该项目是基于vue2.x的。项目中最复杂的页面是编辑页面，页面大概长这样(找了个类似的界面)：

可以看到界面比较复杂，大大小小组件差不多几十个，如果不使用状态管理库的话，使用父子组件交互比较麻烦，所以最终选用了vuex作为状态管理的库。

那么像这种比较复杂的项目，vuex的代码将如何组织呢？下面是我推荐的方法：

首先一个项目会有很多模块（或者叫页面），我的建议是将store按照业务逻辑的模块进行划分，一个业务模块对应一个module

这里需要注意的是：

不要把所有的业务模块放到一个store里面，这样项目状态变多之后就不太好维护。
一个业务模块不要对应多个vuex的module,即使很复杂。
犯下的错（可以跳过）
这两个坑我都踩过，刚开始做项目的时候，项目比较小，也很简单，编辑页面也没有现在那么复杂，我大概看了一下，需要存的状态只有用户信息和编辑页面的一些状态，没多少,我就放一起了。代码大概这样，所有的状态都在store中

export const store = new Vuex.Store({
   
    state: {
   
        userInfo:{
   
            id:'',
            token:'',
            phone:''
        },
        materials:[],
        audio:[],
        task:[]
    },
    mutations: {
   },
    modules: {
   },
})

复制代码

这样搞完之后，代码稳定运行了一段时间。 后来产品让加功能，支持多个视频场景，支持背景，支持滤镜，分辨率调整，素材动画等等乱七八糟的功能，需要存的状态也多了很多，都放到一起，store这个文件就太长了，达到了一千多行。在这种情况下，我感觉状态再加下去store那个文件会越来越不好维护，所以重构了下代码，这时我犯下了第二个错误：

我把编辑页面的状态分成了好几个module,大概长这样

const user={
   
  state: () => ({
    ... }),
  mutations: {