javascript - 在 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 配置 ，我遇到了一些 linting 错误，例如(当前被 repo 和示例中的 // eslint-disable-next-line 规则禁用):Dependency cycle via @/store/modules/profile > eslint(import/no-cycle)虽然这似乎不会影响商店的实际运作(或者会影响？)，但我想知道如何在不需要关闭规则或使用 // eslint-disable-next-line import/no-cycle 的情况下克服这个问题。在那些线上？
如果标准和更漂亮的 linter 配置发生这种情况，我还没有尝试过，还是与 Airbnb 规则有关？
2. 如何有一个没有任何 Action 的模块？
我试过 在不使用任何操作的情况下配置配置文件模块 ，但是我无法获得类型权限。
目前，示例代码包括一种 NON_ACTION Action 类型...
三、如何正确使用namespaced: true模块选项，以及它如何影响组件中的使用语法？
当前配置文件存储配置为 namespaced: true .在 App.vue 中，我使用 mapGetters 来演示它，它以模块名称作为第一个参数。这行得通。
但是，documents 模块没有这个选项，因为使用 action 类型的 dispatch 不再起作用。它似乎需要与我找不到的其他一些语法变体一起使用。
PS。任何进一步的代码改进建议都非常欢迎作为评论、答案和拉取请求!
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 以允许完全安全的命名空间访问，而无需使用魔法字符串。