vue.js - Vuex 条件（延迟加载？）存储

Question

我正在 Vue.js 中构建一个 SPA 来管理登录用户的文档和仪表板。我面临以下问题：

• 我有一个带有多个模块的 vuex 商店，管理不同的事情。
• 这些模块中的一个（某些）用于管理目的（添加新仪表板、编辑仪表板……等等）。
• 只有极少数最终用户可以访问管理区域，因此使用管理员 vuex 模块。

为所有用户提供管理存储和状态似乎不是很优化，所以我的问题是：是否有一种架构方法可以仅在条件下（例如，如果用户是管理员）将模块添加到 vuex 存储？也许某种延迟加载只会在用户访问管理界面时加载这个商店？

编辑：我将通过异步 API 调用确定谁是管理员，因此解决方案（如果存在）必须允许动态更改存储结构。我想避免创建 2 个 vue 实例的解决方法。我认为这是许多解决方案中出现的常见问题？（有一个不应该为普通用户提供的用于管理目的的大商店）

标签： vue.jsvuexlazy-loading

Answer 1

您可以保存一个单独的变量并根据条件添加某些模块：

import normalModule from './normalModule';
import admin from './admin';

const modules = {
    normalModule
}

if (isAdmin) modules['admin'] = admin;

export default new Vuex.Store({
    modules,
});

如何确定他们是否是管理员取决于您。