前端面试：vue的vuex内容过多该怎么处理

前言

记得之前有一次面试问过我vuex的内容过多该怎么处理？可能我当时理解错了，我以为他考我其他的储存方式，我回答内容过多的话可以借助于浏览器缓存，利用sessionStorage,cookie等方式进行储存。

下来仔细一思考，当然回答肯定是不正确的，想起了vuex中的modules，突然恍然大悟，原来这道题考的是模块化处理。

一、何为模块化处理？

这里可以借用官方解释：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

注：我们的路由管理router冗余同样可以采用类似如下的模块化操作。

二、如何引入模块化？

这里跳过vuex的安装教程，如需安装，可参考官网教程：vuex安装教程

1.vuex基本目录

在store下新建module文件夹，module文件夹下里面可以存放不同的模块，同时module文件夹下新建index.js,用于批量导出模块。

2.A模块

/*A模块*/
export default {
   
namespaced: true,//命名空间的模块，后面会使用到
  state:{
   
    testA:null,
    testTwo:null
  },
  mutations:{
   
    setTestA(state,testA){
   
      state.testA=testA
    },
    settestTwo(state,testTwo){
   
          state.testTwo=testTwo
    }
  },
  getters:{
   

  },
  actions:{
   

  }
}

A模块拥有自己的 state、mutation、action、getter，同样B、C模块基本结构也是如此

3.module/index

import