在撰写本文时，Vue 3.0 已经发布了它的第一个稳定的v3.0.0 'One Piece' 版本，而 Vuex 4 位于v4.0.0-beta.4中。
不幸的是，目前还没有关于如何在 TypeScript 中使用 Vuex 4 模块的官方示例......
作为进一步的要求，我希望将模块状态、突变、getter 和操作存储在它们自己的文件中。当这些模块增长时，这使得管理代码变得更容易。
我设法在Github和Codesandbox中拼凑出一个工作示例存储库。
通过使用这些资源中提供的示例：
- Andrew 在 Dev.to 中的 Vuex + TypeScript
- 要点 javisperez/index.ts
- 回购 andrewvasilchuk/vuex-typescript
- Vue 3 和 Vuex 4：Barylski 在 Dev.to 中可组合的 useStoreModule
- LogRocket 的 Vuex 映射完整指南
但是，仍有一些怪癖有待解决：
1. 解决依赖循环 linting 错误
目前，模块的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在这些线路上使用的情况下克服这个问题？
如果标准和更漂亮的 linter 配置发生这种情况，我还没有尝试过，还是与 Airbnb 规则有关？
2. 如何有一个没有任何动作的模块？
我试图在不使用任何操作的情况下配置配置文件模块，但是我无法获得类型权限。
目前，示例代码包括一种 NON_ACTION 动作类型...
3. 如何正确使用namespaced: true模块选项，以及它如何影响组件中的使用语法？
当前配置文件存储配置为namespaced: true. 在 App.vue 中，我使用 mapGetters 来演示它，它以模块名称作为第一个参数。这行得通。
但是，documents 模块没有这个选项，因为使用 action 类型的 dispatch 不再起作用。它似乎需要与我找不到的其他一些语法变体一起使用。
PS。任何进一步的代码改进建议都非常欢迎作为评论、答案和拉取请求！
2020 年 9 月 27 日更新：useStore当在组件内部使用时，我刚刚意识到 VS Code 智能感知在从函数传递存储实例后没有显示存储实例的类型信息。如果在.ts文件中导入，则可以使用。