vuex动态引入store modules

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

当时的场景是将原有的前端项目加入 Vuex 状态管理， Vuex 的好处就不用多说了

刚开始的时候每添加一个新的S tore 文件，需要去主的 index.js 去单独 import ,然后放到 modules 下，

所以就想到用 webpack 提供的一些全局方法来动态的引入主文件下的每一个 Store 文件

主要解决的问题每次建一个 module 需要自己去主 index.js 里面去注册

为了偷懒，也为了避免团队开发时同时对 index.js 进行修改引发冲突

所以在 index.js 中动态的对子目录和模块进行注册

我的目录结构是

store
- index
- modules
  - common
    - index.js
  - sys
    - log.js
  - base
    - user.js
    - dept.js
    - area.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const dynamicModules = {}

const files = require.context('.', true, /\.js$/)

const dynamicImportModules = (modules, file, splits, index = 0) => {

    if (index == 0 && splits[0] == 'modules') {

        ++index

    }

    if (splits.length == index + 1) {

        if ('index' == splits[index]) {

            modules[splits[index - 1]] = files(file).default

        } else {

            modules.modules[splits[index]] = files(file).default

        }

    } else {

        let tmpModules = {}

        if ('index' == splits[index + 1]) {

            tmpModules = modules

        } else {

            modules[splits[index]] = modules[splits[index]] ? modules[splits[index]] : {namespaced: true, modules: {}}

            tmpModules = modules[splits[index]]

        }

        dynamicImportModules(tmpModules, file, splits, ++index)

    }

}

files.keys().filter(file => file != './index.js').forEach(file => {

    let splits = file.replace(/(\.\/|\.js)/g, '').split('\/');

    dynamicImportModules(dynamicModules, file, splits)

})

export default new Vuex.Store({

    modules: dynamicModules,

    strict: process.env.NODE_ENV !== 'production'

})