将 Vue 3 中的 Vuex 4 模块与 TypeScript 一起使用，以及如何修复循环依赖检查错误？

Question

在撰写本文时，Vue 3.0 已经发布了第一个稳定的v3.0.0 'One Piece' 版本，Vuex 4 处于v4.0.0-beta.4 中。

不幸的是，目前还没有关于如何在 TypeScript 中使用 Vuex 4 模块的官方示例......

作为进一步的要求，我希望在它们自己的文件中存储模块状态、突变、getter 和操作。这使得在这些模块增长时更容易管理代码。

我设法在Github和Codesandbox 中拼凑了一个工作示例存储库。

通过使用这些资源中提供的示例：

但是，仍有一些问题有待解决：

目前，模块的index.ts、actions.ts和getters.ts中的类型依赖于RootState从主商店导入。

当使用ESLint Airbnb linting config 时，我遇到了 linting错误，例如（当前被// eslint-disable-next-linerepo 和示例中的规则禁用）：

Dependency cycle via @/store/modules/profile > eslint(import/no-cycle)

虽然这似乎不会影响商店的实际运作（或者会影响吗？），但我想知道如何在不需要关闭规则或需要// eslint-disable-next-line import/no-cycle在这些线上使用的情况下克服这个问题？

我还没有尝试过这种情况是否发生在 Standard 和 Prettier linter 配置中，还是与 Airbnb 规则有关？

我尝试在不使用任何操作的情况下配置配置文件模块，但是我无法获得类型权限。

当前示例代码包括一种 NON_ACTION 操作类型...

当前配置文件存储配置为namespaced: true. 在 App.vue 中，我使用 mapGetters 来演示它，它以模块名称作为第一个参数。这有效。

然而，文档模块没有这个选项，因为带有动作类型的调度不再起作用。它似乎需要与我无法找到的其他一些语法变体一起使用。

附注。欢迎任何进一步的代码改进建议作为评论、答案和拉取请求！

20 年 9 月 27 日更新：我刚刚意识到useStore，在组件内部使用时，VS Code 智能感知在从函数传递存储实例后没有显示它的类型信息。如果在.ts文件中导入则有效。

Answer 1

我发布了一个包来帮助使用 Vuex 4 和 Typescript。它并不完美，但它涵盖了我们遇到的 95% 的问题。对于任何反馈，我们都表示感谢。

它需要 TS 4.1+ 才能支持模板文字。

FWIW 最初的实现受到了您对模块的启动的极大启发，但扩展了它，并支持具有完全类型化访问的 mapState/mapActions 等。需要 TS 4.1 来支持模板文字，以允许完全安全的命名空间访问，而无需魔术字符串。