store/index.js中引入并注册modules目录中的js文件：require.context

一、常规方式

1）、先引入

import user from './modules/user'
import app from './modules/app'
import settings from './modules/settings'

2）、注册到modules中

modules: {
      user,
      app,
      settings
    },

代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import app from './modules/app'
import settings from './modules/settings'
import getters from './getters'

Vue.use(Vuex)

  export default new Vuex.Store({
    modules: {
      user,
      app,
      settings
    },
    getters // 注意：这里必须写getters，否则你再getters.js中对state中的数据进行加工形成的新数据不会生效
  })

二、使用require.context

store中需要引入很多modules/*.js , 可以使用require.context

require.context()

require.context(directory, useSubdirectories, regExp)

• directory：要搜索的目录
• 是否搜索其子目录
• 匹配文件的正则表达式

代码如下：

const modulesFiles = require.context("./modules", false, /\.js$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});


export default new Vuex.Store({
  modules,
  getters // 注意：这里必须写getters，否则你再getters.js中对state中的数据进行加工形成的新数据不会生效
})