将Vue 3中的Vuex 4模块与TypeScript一起使用，以及如何解决周期性依赖项替换错误？ 1解决依赖周期循环错误 2如何没有任何动作的模块？ 3如何正确使用// eslint-disable-next-line import/no-cycle模块选项，以及它如何影响组件中的用法语法？

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

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

作为进一步的要求，我想在其自己的文件中存储模块状态，变异，获取器和操作。当这些模块扩展时，这使得管理代码更容易。

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

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

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

当前，模块index.ts，actions.ts和getters.ts中的类型取决于从主存储导入RootState的情况。

使用 ESLint Airbnb衬棉配置时，我被诸如（目前在回购和示例中受// eslint-disable-next-line规则禁用）的衬毛错误困扰

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

虽然这似乎并没有影响商店的实际功能（或者是呢？），但我想知道如何克服此问题而无需关闭规则或使用{{1} }在这些行上？

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

我尝试配置概要文件模块而未执行任何操作，但是我无法获得类型权限。

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

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

但是，documents模块没有此选项，因为使用动作类型进行分派不再起作用。它似乎需要与我找不到的其他语法变体一起使用。

PS。欢迎任何进一步的代码完善建议作为注释，答案和请求请求！

更新27/09/20：当在组件内部使用VS Code intellisense从namespaced: true函数传递商店实例后，我刚刚意识到VS Code intellisense不显示商店实例的类型信息。如果导入到useStore文件中，则可以使用。

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

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

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