在 TypeScript Vue 项目中使用 Vuex 的正确方法是什么？

Question

我目前正在学习 Vue、Vuex 和 TypeScript，我必须说我对如何正确设置 Vuex 存储有点困惑。该文档根本没有涵盖 TypeScript 实现（我觉得文档通常缺乏基本的 TypeScript 示例？）是什么让我（再次！）在官方文档之外的其他页面上寻找解决方案（恕我直言，这不应该发生如果一项新技术是直接通过官方资源学习的，因为它应该包含使该技术发挥作用所需的所有信息，对吧？！）。

因此，当我在万维网上寻找解决方案时，我遇到了以下模式：

1. 在bezkoder.com上，他们使用装饰器将vuex-module-decoratorsVuex 商店模块定义为类。然后，他们再次使用装饰器，但这次是从vuex-class，以从他们的 Vue 组件访问各自的状态、突变和动作。这个解决方案似乎非常“TypeScripty”，因为它们使用了官方 Vue TypeScript 文档中的类和装饰器。

2. 在itnext.io（Medium.com 网站）上，他们使用所谓的“直接商店”和direct-vuex. 在这里，他们以更“JavaScript”的方式定义商店本身，因为所有状态、变更和操作都作为普通对象传递给商店实例。

3. 在dev.to和codeburst.io（另一个 Medium.com 网站）上，他们使用普通的 TypeScript 功能来创建他们的商店。因此，他们设置了很多常量enums，并在一堆不同的文件中strings定义了几个，然后将这些文件全部导出并再次导入到每个模块的索引文件中，然后创建相应的 Vuex 模块。interfaces这个解决方案在某种程度上是“TypeScripty”和“JavaScripty”解决方案的混合体。似乎这种方法创建了最多的样板代码。

所以现在，作为一个 Vue 初学者，我有点困惑，我有以下问题：

• 我应该更喜欢哪种方法（1、2 或 3 或者是否有其他方法？），为什么？这些方法的优点和缺点是什么？（我搜索了不同方法的比较，但找不到任何东西。）

• 我应该使用不是由官方 Vue 团队维护的插件吗？我如何确定这些插件会得到更新以适用于未来的 Vue 版本？（例如，在作者的GitHub 存储库中vuex-module-decorators明确表示，该插件只是他的一个副项目，这让我怀疑该插件是否会获得长期更新。）

• 为什么官方文档中没有相关内容？为什么官方文档缺少这么多 TypeScript 示例？有什么地方可以找到可靠的 TypeScript 示例和常见场景的解决方案吗？

Answer 1

我不被允许评论，所以我需要回答，但我也不能回答你所有的问题……我也遇到过类似的情况。我现在正在使用 vuex-module-decorators。正如您所写的那样，这感觉非常好，而且设置非常简单，用法也是如此。因为我必须经常更新我的代码并最终更新 Vue.js 等......我冒着使用这个（大）依赖项的风险，因为我知道我可能不得不在某个时候重建我的东西。但是使用 vuex-module-decorators 节省了我很多时间并且几乎没有给我带来任何问题。我不知道其他解决方案，但我觉得这对 vue 和 typescript 来说非常自然。我希望这会有所帮助