【vue2小知识】实现store中modules模块的封装与自动导入

【前言】在store中如何简化我们的模块导入进index的操作？

我们在平常使用vuex存储我们公共数据资源的时候，如果将所有的共享数据都统一的写在store文件夹下的index中，那么这样的话我们的共享数据可能会非常的多，处理数据的时候也不方便处理。因此我们通常是将我们的共享数据按照我们的模块来进行划分。平常的划分模式是直接通过import引入到index达到store仓库中实现数据共享的问题。

本文阅读完可实现modules中书写的各模块会自动导入到我们的store的index文件中

关于vuex的知识可查看：http://t.csdn.cn/9VTx7

一、创建我们的模块名

store/modules/menu等等（本文演示模块为下图所示）

有app、menu、settings、user四个模块

二、在我们的index中使用require.context()方法

1.require.context（）方法介绍

参数有三个分别为：

1. 要搜索的文件夹路径
2. 是否开启递归搜它的子目录
3. 正则的匹配

理论结束，开始我们的实操

2.引入我们的数据源

我们先查看一下我们调用这个方法我们打印的是什么？

发现req就是我们写的这个方法，req.keys()为我们路径下符合条件的对象构成的数组

3.用方法来提取修改我们的数据

控制台查看我们打印的数据

这样我们就提取出来了我们的模块名（mName),与我们所有的模块（map）注意我们的每项数据在default中

4.数据的整合

开始创建一个对象来接收我们的数据

可以看到我们这就提出出来了我们的数据，以模块名为键，以各模块的内容为值

随后直接导入到store中即可

三、效果查看

我们在页面访问可获取的我们存放在vuex中的值：

【上述我们的index源代码】

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const req = require.context('./modules', false, /\.js$/)
console.log(req, 'req')
console.log(req.keys(), 'req.keys()')// 模块名的数组
// 打印出模块名
const mName = req.keys().map(item => item.split('./')[1]).map(item => item.split('.js')[0])
console.log(mName, 'mName')
console.log(req.keys().map(req), 'map')// 所有的modules组成的列表
// 遍历模块添加到obj中
const obj = {}
const mMoudle = req.keys().map(req)
mName.forEach((item, index) => {
  obj[item] = mMoudle[index].default// 每一个对象
})
console.log(obj, 'obj')
const store = new Vuex.Store({
  modules: obj,
})
export default store

以上便是实现自动封装modules数据的方法啦！