Javascript 在Vue 3中使用带有TypeScript的Vuex 4模块，以及如何修复周期性依赖项linting错误？

在撰写本文时，Vue 3.0已经达到了它的第一个稳定状态，Vuex 4已经进入

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

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

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

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

然而，还有一些怪癖需要解决：

1.解决依赖项循环linting错误 当前，模块的

索引.ts

、

操作.ts

和

getters.ts

中的键入依赖于从主存储导入

根状态

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

通过@/store/modules/profile>eslint的依赖循环（导入/无循环）

虽然这似乎不会影响商店的实际功能（或者是否会影响？），但我想知道如何克服这一问题，而无需关闭规则，或者在这些行上使用
//eslint禁用下一行导入/无循环

我还没有尝试过，如果这种情况发生在标准和更漂亮的棉绒配置上，或者它与Airbnb规则有关

2.如何拥有一个没有任何动作的模块？
我试图在不使用任何操作的情况下配置配置文件模块，但无法获得类型权限

当前示例代码包括一个非\u操作类型

3.如何正确使用
namespaced:true
module选项，以及它如何影响组件中的使用语法？
当前配置文件存储配置为
namespaced:true
。在App.vue中，我使用mapGetters来演示它，mapGetters将模块名作为第一个参数。这很有效

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

任何进一步的代码改进建议都是非常受欢迎的，如评论、回答和请求

更新27/09/20：我刚刚意识到VS Code intellisense在组件内部使用时，从useStore函数传递存储实例后，没有显示存储实例的类型信息。如果在
.ts
文件中导入，则可以正常工作。
我发布了一个软件包，帮助您将Vuex 4与Typescript一起使用。它并不完美，但它涵盖了我们95%的问题。如有任何反馈，将不胜感激

它需要TS 4.1+来支持模板文字


FWIW最初的实现受到模块启动的高度启发，但扩展了模块，并支持mapState/mapActions等全类型访问。需要TS 4.1的模板文字支持，以允许完全安全的名称空间访问，而无需使用魔法字符串。
您是否从vuex创建者Kia Kong上观看了此视频？我希望可以helpful@boussadjra-布拉希姆：我在会议上确实看过，但我可能错过了其中的一部分。谢谢你指出，我现在又看了一遍。所以基本上我们都在等待Vuex 5，但我想让TypeScript类型还不能完全与Vuex 4配合使用是可以的。但是，让我们看看是否有人在这些打字方面做得更进一步，因此我将向Vuex repo.ux.engineer寻求指导，因为您的问题已经过去了几个月，您能否向您展示当前在Vuex 4中使用typescript的方法？您能否更详细地介绍如何更准确地使用此模块，我需要一个好的包装器，直到vuex 5问世。我在这里使用它进行了一个示例实现：您几乎只需在模块中添加额外的类型（如上文所述），导出存储类型，以便在任何地方都可以使用它，然后使用包装器而不是useStore/mapX