一、常规方式

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中的数据进行加工形成的新数据不会生效
})

 

posted on 2021-12-04 21:07  周文豪  阅读(451)  评论(0编辑  收藏  举报