组织 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 并使其在未来的更新中更易于使用。当需要调整或修复现有功能时,这可能最有用。
步骤:
-
要开始此活动,您将使用第 11 章 /activity11.01/initial (https://packt.live/3kaqBHH) 中找到的完整示例。
-
修改存储文件以将 state、getter 和 mutations 放入自己的文件中。
-
修改 state,使 cat 值位于模块中。
-
将 cat 相关的 getter 迁移到模块中。
-
更新 App.vue 文件,使其仍然正确显示最初显示的数据。
这是构建后的样子:
