时间戳

首页 > 解决方案 > Vuex - 模型嵌套模块的依赖

typescript - Vuex - 模型嵌套模块的依赖

问题描述

我的应用程序状态中的属性之间存在依赖关系，我不知道如何在 Vuex 中表达。

用户可以登录，然后选择要连接的多个工作区之一。显然，如果他没有登录，他将无法连接到工作区。工作区对登录的这种依赖性是我遇到的问题。

进行这项工作的“蛮力”方式是在每次访问工作区数据之前手动检查用户是否已登录。但是，这种检查很容易忘记，这就是为什么我想要这样的替代方案：
如果我可以将工作区嵌套为会话的属性，我可以强制商店的用户在访问工作区之前检查会话是否存在（例如，使用 TypeScript 的严格模式）。

type State = {
  session?: {
    userInfo: {username: string},
    workspaceInfo: {workspaceId: string},
  }
}

使用严格的设置，TypeScript 会在访问时发出警告state.session.workspaceInfo，而无需确保session已定义。这是一个我很满意的解决方案。

不幸的是，我不知道如何在 Vuex 中表示这一点，因为我不能在状态中“嵌套”一个子模块，也不能让一个模块“可选”，因为它可能是未定义的。

有没有一种解决方案可以在 Vuex 中模拟这种依赖关系？

标签： typescriptvue.jsmoduledependenciesvuex

解决方案

由于缺乏有关此问题的明显文档，因此只是经历了与此类似的问题并尝试了不同的事情。从实验来看，以下方法似乎有效：

export interface RootState {
  moduleA: ModuleAState;
  moduleB: ModuleBState;
}

export interface ModuleAState {
  valueA: string;
}

export interface ModuleBState {
 valueB: string;
}

这允许您使用访问命名空间状态state.moduleA.valueA

推荐阅读