在 Vue 3 中使用 Vuex 4 模块和 TypeScript,以及如何修复循环依赖 linting 错误?
Posted
技术标签:
【中文标题】在 Vue 3 中使用 Vuex 4 模块和 TypeScript,以及如何修复循环依赖 linting 错误?【英文标题】:Using Vuex 4 modules in Vue 3 with TypeScript, and how to fix cyclical dependency linting error? 【发布时间】:2021-01-12 18:13:28 【问题描述】:在撰写本文时,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
文件中导入,则可以使用。
【问题讨论】:
vuex 创建者 Kia Kong 的 recent video 看过了吗,希望对您有所帮助 @boussadjra-brahim 我确实在会议上看过,但我可能错过了部分内容。谢谢指点,我又看了一遍。所以基本上我们正在等待 Vuex 5,但是我猜 TypeScript 类型还不能完全与 Vuex 4 一起工作。但是让我们看看是否有人在这些类型上走得更远,所以我会向 Vuex repo 寻求指导。 ux.engineer,你的问题已经过去几个月了,你能告诉你当前在 Vuex 4 中使用 typescript 的方法吗? 【参考方案1】:我已经发布了一个包来帮助将 Vuex 4 与 Typescript 结合使用。它并不完美,但它涵盖了我们遇到的 95% 的问题。任何反馈将不胜感激。
模板文字支持需要 TS 4.1+。
https://www.npmjs.com/package/typed-vuex-wrapper
FWIW 最初的实现受到您对模块的启动的极大启发,但扩展了它,并支持具有完全类型化访问的 mapState/mapActions 等。模板文字支持需要 TS 4.1 以允许完全安全的命名空间访问,而无需使用魔法字符串。
【讨论】:
你能否更详细地说明如何更准确地使用这个模块,我需要一个好的包装器,直到 vuex 5 出来。 我在这里使用它做了一个示例:github.com/timritzer/typed-vuex-examples 您几乎只需在模块中添加额外的类型(如上),导出商店类型以便它可以在任何地方使用,然后使用包装器而不是 useStore/mapX以上是关于在 Vue 3 中使用 Vuex 4 模块和 TypeScript,以及如何修复循环依赖 linting 错误?的主要内容,如果未能解决你的问题,请参考以下文章