在项目中引用vuex并动态加载modlues

1. 在src文件夹下新建store文件夹，并创建index.js文件

index.js代码(动态加载modlues)：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 动态加载modlues
const allDynamicModules = {};
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(allDynamicModules, file, splits);
  });

const store = new Vuex.Store({
  state: {},
  modules: allDynamicModules,
  mutations: {
    $uStore(state, payload) {
      // 判断是否多层级调用，state中为对象存在的情况，诸如user.info.score = 1
      let nameArr = payload.name.split('.');
      let saveKey = '';
      let len = nameArr.length;
      if (nameArr.length >= 2) {
        let obj = state[nameArr[0]];
        for (let i = 1; i < len - 1; i++) {
          obj = obj[nameArr[i]];
        }
        obj[nameArr[len - 1]] = payload.value;
        saveKey = nameArr[0];
      } else {
        // 单层级变量，在state就是一个普通变量的情况
        state[payload.name] = payload.value;
        saveKey = payload.name;
      }
    }
  },
  actions: {}
});

export default store;

2. 在main.js中引入store文件夹并挂载

main.js代码：

import store from './store';

new Vue({
  router,
  vant,
  store,
  render: h => h(App)
}).$mount('#app')

3. 在store文件夹下新建modules文件夹，在modules文件夹下新建模块文件夹，在模块文件夹下新建js文件

举例：

ncovaBroad.js代码：

'user strict';

const state = {
  ncovaInfo: {} //国外新冠信息
};
const mutations = {
  setNcovaInfo(state, ncovaInfo) {
    state.ncovaInfo = {
      ...state.ncovaInfo,
      ...ncovaInfo
    };
  }
};
const actions = {
  getNcovaInfo(context, obj) {
    context.commit('setNcovaInfo', obj)
  },
};
export default {
  namespaced: true,
  state,
  mutations,
  actions
};

4. 页面中使用

1）dispatch：

    this.$store.dispatch("ncovaBroad/ncovaBroad/getNcovaInfo", {
      name: "ncova", //名称
      attribute: "dangerous" //属性
    });

2）state:

this.$store.state.ncovaBroad.ncovaBroad.ncovaInfo