Vuex动态加载modules

### 使用 Vuex 管理 Vue.js 中的动态路由 在 Vue.js 项目中，可以利用 Vuex 来管理应用程序的状态，包括路由配置。这有助于保持应用逻辑的一致性和可维护性。 #### 创建 Vuex Store 并初始化路由列表 首先，在 Vuex store 中定义一个模块来保存所有的路由信息： ```javascript // src/store/routerStore.js const state = { routes: [] }; const mutations = { SET_ROUTES(state, newRoutes) { state.routes = [...newRoutes]; } }; const actions = { setRoutes({ commit }, routes) { commit('SET_ROUTES', routes); } }; export default { namespaced: true, state, mutations, actions }; ``` 接着注册此模块到根级别的 Vuex store 文件里: ```javascript import Vue from 'vue'; import Vuex from 'vuex'; import routerStore from './routerStore'; Vue.use(Vuex); export default new Vuex.Store({ modules: { routerModule: routerStore } }); ``` #### 动态加载路由并更新至 Vue Router 当需要向现有路由表添加新路径时，可以通过调用 `setRoutes` action 方法实现，并通知 Vue Router 进行刷新操作： ```javascript // main.js 或者其他合适的地方触发该函数 async function loadDynamicRoutes() { const dynamicRoutes = await fetch('/api/routes').then(res => res.json()); this.$store.dispatch('routerModule/setRoutes', dynamicRoutes).then(() => { const latestRoutes = this.$store.state.routerModule.routes; // 更新路由器实例中的routes属性 this.$router.addRoute(latestRoutes); // 对于 Vue Router v4+ // 如果使用的是较早版本，则可能需要用 addRoutes() }); } ``` 注意这里假设 API 返回了一个有效的 JSON 数组形式的路由对象集合[^1]。 对于组件内部想要访问这些由 Vuex 控制下的动态路由数据来说，可以直接通过计算属性获取最新的状态副本： ```javascript computed: { currentRoutes() { return this.$store.getters['routerModule/getRoutes']; } }, ``` 以上就是在 Vue.js 项目中运用 Vuex 处理动态路由的一种常见模式[^2]。