组织 Vuex 存储的其它方法

虽然前两种方法应该为您提供一些管理 Vuex store 的不错选择,但您也可能希望考虑其它一些选择。

Vuex 路径化

Vuex Pathify (https://davestewart.github.io/vuex-pathify/) 是一个实用程序,可以更轻松地通过路径 API 访问 Vuex 存储。因此,例如,可以像这样访问带有名为 resume 的模块和 jobs 状态值的 store:store.get('resume/jobs')。基本上,它创建了一个用于在存储中读取和写入值并简化同步的快捷方式。XPath 的粉丝一定会喜欢这个。

Vuex Module Generator (VMG)

VMG 是一个库,它向您的存储添加基本的创建(Create)、读取(Read)、更新(Update)、删除(Delete) (CRUD) 操作,使您无需重写常见逻辑。您可以导入库的功能,然后将它们添加到您的状态(state)、突变(mutations)和操作(actions)中。任何从事 Web 开发多年的人都熟悉 CRUD 模式,并且绝对会因为不必再次编写这些功能而高兴得跳起来。

查看 GitHub 存储库 (https://github.com/abdullah/vuex-module-generator) 了解更多详细信息和示例应用程序。

Vuex ORM

Vuex ORM 将 ORM 库添加到您的 Vuex store。ORM 是对象关系映射的缩写,是一种帮助简化对象持久性的模式。与 VMG 一样,Vuex ORM 旨在简化 Web 开发人员必须编写的相当常见的 CRUD 任务。

Vuex ORM 允许您定义表示 store 数据结构的类。一旦定义了数据的结构,Vuex ORM 就会提供实用函数,使在存储中存储和检索数据变得更加简单。它甚至可以处理数据之间的关系,例如一个人拥有一系列属于它的猫对象。

以下是如何定义数据类型的示例:

class Cat extends Model {
    static entity = 'cats'
    static fields () {
        return {
            id: this.attr(null),
            name: this.string(''),
            age: this.number(0),
            adoptable: this.boolean(true)
        }
    }
}

在前面的类中,为 Cat 类定义了四个属性:id、name、age 和 adoptable。对于每个属性,都指定了默认值。 一旦定义,请求所有数据就像 Cat.all() 一样简单。Vuex ORM 还有很多内容,您可以在 https://vuex-orm.github.io/vuex-orm/ 查看。

活动 11.01:简化 Vuex 存储

这项活动将与您之前做过的活动有所不同。在本活动中,您将使用 Vuex 的现有应用程序并应用您在本章中学到的一些技术,以简化 store 并使其在未来的更新中更易于使用。当需要调整或修复现有功能时,这可能最有用。

步骤:

  1. 要开始此活动,您将使用第 11 章 /activity11.01/initial (https://packt.live/3kaqBHH) 中找到的完整示例。

  2. 修改存储文件以将 state、getter 和 mutations 放入自己的文件中。

  3. 修改 state,使 cat 值位于模块中。

  4. 将 cat 相关的 getter 迁移到模块中。

  5. 更新 App.vue 文件,使其仍然正确显示最初显示的数据。

这是构建后的样子:

image 2023 10 17 09 58 46 237
Figure 1. Figure 11.3: Final output of the activity

总结

在本章中,您学习了多种不同的技术来帮助您的 Vuex 存储做好应对不断增长的复杂性的准备。您首先学习了如何将逻辑移动到单独的文件中并将它们包含在您的 store 中。然后,您了解了模块以及如何使用存储将它们公开给组件。最后,您了解了一些可选库,它们可能会让您的 Vuex 使用更加强大。

在下一章中,您将了解开发的一个非常重要的方面,即单元测试。