在 Vue 3 中使用 Vuex 4 模块和 TypeScript，以及如何修复循环依赖 linting 错误？

Question

在撰写本文时，Vue 3.0 已经达到了它的第一个稳定版 v3.0.0 'One Piece' release，而 Vuex 4 位于 v4.0.0-beta.4。

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

作为进一步的要求，我希望将模块状态、突变、getter 和操作存储在它们自己的文件中。这样可以在这些模块增长时更轻松地管理代码。

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

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

• Vuex + TypeScript by Andrew in Dev.to
• Gist javisperez/index.ts
• Repo andrewvasilchuk/vuex-typescript
• Vue 3 & Vuex 4: useStoreModule composable by Barylski in Dev.to
• A complete guide to mapping in Vuex by LogRocket

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

1。解决依赖循环 linting 错误

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

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

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

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

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

2。如何有一个没有任何动作的模块？

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

目前示例代码包括一种 NON_ACTION 动作类型...

3。如何正确使用namespaced: true模块选项，以及它如何影响组件中的使用语法？

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

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

PS。任何进一步的代码完善建议都非常欢迎作为 cmets、答案和拉取请求！

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

Answer 1

我已经发布了一个包来帮助将 Vuex 4 与 Typescript 结合使用。它并不完美，但它涵盖了我们遇到的 95% 的问题。任何反馈将不胜感激。

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

https://www.npmjs.com/package/typed-vuex-wrapper

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