Vuex模块化

mian.js

import Vue from "vue";
import store from "./store";

new Vue({
  el: "#BYUI_APP",
  router,
  store,
  render: (h) => h(App),
});

src/store/index.js

import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";

Vue.use(Vuex);
const modulesFiles = require.context("./modules", true, /\.js$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});
const store = new Vuex.Store({ modules, getters });
export default store;

src/store/getters.js

const getters = {
  device: (state) => state.app.device,
  accessToken: (state) => state.user.accessToken,
  avatar: (state) => state.user.avatar,
  collapse: (state) => state.settings.collapse,
  cachedViews: (state) => state.tagsView.cachedViews,
  errorLogs: (state) => state.errorLog.logs,
  header: (state) => state.settings.header,
  lastLoginTime: (state) => state.user.lastLoginTime,
  layout: (state) => state.settings.layout,
  logo: (state) => state.settings.logo,
  loginTimes: (state) => state.user.loginTimes,
  name: (state) => state.user.name,
  roles: (state) => state.user.roles,
  routes: (state) => state.permission.routes,
  selectedTag: (state) => state.tagsView.selectedTag,
  srcTableCode: (state) => state.table.srcCode,
  tagsView: (state) => state.settings.tagsView,
  visitedViews: (state) => state.tagsView.visitedViews,
};
export default getters;

src/store/modules 各自管理仓库