【问题标题】:Vuex conditional (lazy-loading?) storeVuex 条件(延迟加载?)存储
【发布时间】:2021-01-29 22:27:16
【问题描述】:

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

  • 我有一个包含多个模块的 vuex 商店,用于管理不同的事情。
  • 这些模块中的一个(部分)用于管理目的(添加新仪表板、编辑仪表板......等等)。
  • 只有极少数最终用户可以访问管理区域,因此请使用管理员 vuex 模块。

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

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

【问题讨论】:

    标签: vue.js vuex lazy-loading


    【解决方案1】:

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

    import normalModule from './normalModule';
    import admin from './admin';
    
    const modules = {
        normalModule
    }
    
    if (isAdmin) modules['admin'] = admin;
    
    export default new Vuex.Store({
        modules,
    });
    

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

    【讨论】:

    • 是的,但我将根据从同一商店访问的 API 确定用户是否为管理员。何时创建商店(打开 SPA 时),我不知道用户是否是管理员。只有登录后,我才能访问他的角色。将模块添加到商店为时已晚?或者,也许我可以在收到服务器的响应后动态添加它。我有点想,一旦创建了商店,我就无法以某种方式编辑它的结构。我显然在工作流程中遗漏了一些东西。
    • 不是 100% 确定,但我认为您必须创建一个新的 Vue 实例才能拥有这样的单独商店。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-11-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多