布莱恩F爱
向来自波特兰的谷歌开发者专yobet英雄联盟家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
使用Ultimate Courses以正确的方式学习Angular

vuex for ngrx devs

从Angular开发者使用NgRx的角度,学习使用Vuex在Vue.js应用中构建管理状态。

下载

在这篇文章中,我将使用演示Vue.js申请。您可以克隆存储库或下载源代码的zip文件:

以前

在此之前,我从Angular开发者的角度写了我用Vue.js构建一个简单的待办列表式应用的经历.在本文中,我将继续使用Vuex库来管理应用程序的状态。

NgRx是Angular应用中用来管理状态的流行库。因此,我将从使用NgRx的角度来写这篇文章。FWIW, NgRx是受到Redux库的启发,Redux库是在React应用中管理状态的流行库。我也使用过Redux,发现它易于使用,功能强大。

就让我们一探究竟吧。

安装

npm安装vuex——拯救美元添加vuex

接下来,创建一个新的src /存储目录和一个新的src /商店/ index.js文件:

mkdirsrc /美元商店触碰src /商店/ index.js

打开src /商店/ index.js文件并调用Vue.use ()使用vuex的方法:

进口Vue“vue”进口vuex.'vuex'Vue使用vuex.

确定行动

使用NGRX或Redux或Vuex时,我们要首先规划需要将需要调发的操作,以使我们的应用程序变异。

下面是一个待办应用程序可能需要的操作:

  • 添加一个任务。
  • 清除或删除所有待办事项。
  • 完成待办事项。
  • 将要做的项目设置为不完整。
  • 删除待办事项。

突变

首先,让我们定义突变常数。创建一个新的src /商店/ mutation.js文件。

为每个会导致应用程序状态变化的操作定义字符串常量:

出口常量ADD_TO_DO“addTodo”出口常量CLEAR_TO_DOS'cleartodos'出口常量COMPLETE_TO_DO“completeTodo”出口常量INCOMPLETE_TO_DO“incompleteTodo”出口常量REMOVE_TO_DO“removeTodo”

当使用NgRx时,通常会在我们的应用程序中为“动作类型”定义一个enum。这看起来应该很熟悉。事实上,在TypeScript 2.4支持字符串枚举之前,我们经常在使用NgRx时通过使用字符串常量来定义动作类型,就像在Vue应用程序中定义突变类型一样。

现在我们准备好定义突变对象,我们将导出该对象,以便将我们的突变连接到Vuex商店。突变和使用是同一个概念减速机()纯函数的NgRx将被添加到ActionReducerMap

出口常量突变ADD_TO_DO函数状态待办事项待办事项id数学随机如果待办事项完整的待办事项完整的状态待办事项待办事项CLEAR_TO_DOS函数状态状态待办事项COMPLETE_TO_DO函数状态待办事项待办事项完整的真的INCOMPLETE_TO_DO函数状态待办事项待办事项完整的REMOVE_TO_DO函数状态待办事项常量状态待办事项地图待办事项=>待办事项id指数待办事项id如果===-1返回状态待办事项拼接1

使用es2015对象初始化程序计算属性的规范我们为每个操作声明属性突变目的。

每个处理函数接收状态后跟一个可选的有效载荷与动作一起调度。

行动

接下来,让我们定义动作。创建一个新的src /商店/ actions.js文件:

进口ADD_TO_DOCLEAR_TO_DOSCOMPLETE_TO_DOINCOMPLETE_TO_DOREMOVE_TO_DO”。/突变的出口默认的addTodo提交待办事项提交ADD_TO_DO待办事项clearTodos提交提交CLEAR_TO_DOScompleteTodo提交待办事项提交COMPLETE_TO_DO待办事项incompleteTodo提交待办事项提交INCOMPLETE_TO_DO待办事项removeTodo提交待办事项提交REMOVE_TO_DO待办事项

我们将操作定义为函数,它接受上下文对象以及可选的有效载荷.注意我们正在使用解构的任务在每个操作的第一个参数中,以便基于对象中的属性定义一个局部作用域变量。

在我们的例子中,我们只关心提交财产。的提交实例方法使我们能够向存储提交一个突变。第一个参数是类型第二个论点是动作有效载荷.这与NgRx使用的Redux的概念相同。

创建一个新商店()

打开src /商店/ index.js文件,并添加以下内容以创建一个新的Vuex.store ()实例:

进口行动“/动作。”进口突变”。/突变的出口默认的新的vuex.商店严格的真的状态待办事项行动突变

我们导出默认值Vuex.store ()实例,指定以下选项:

  • 严格的属性设置为真的.我们在开发时这样做,以便每个对象都被递归冻结,不能在mutator之外修改。这和ngrx-store-freeze在开发时应该使用的模块。当然,我们不想运行Vuex严格模式在生产中。
  • 最初的状态有一个顶级的待办事项属性为空数组。
  • 行动属性注册可以分派给存储的操作。
  • 突变属性注册将对存储进行突变(更新)的突变。

注入商店

定义好操作和突变并连接好存储后,我们的下一个任务是注入商店到我们应用程序中的所有组件中。我们将通过Vue.use ()定义和导出的方法src /状态/ index.js模块。

开放src / main.js.并指定商店在里面新vue()构造函数:

进口商店”。/存储的新的Vue商店使成为h=>h应用程序$坐'#应用程序'

调度操作

我们的商店准备好了,我们走吧调度()从我们的行动应用程序.开放src / App.vue并实施

<脚本>进口TodoForm“@ /组件/ TodoForm.vue”进口基于网络“@ /组件/ TodoList.vue”进口ADD_TO_DOCOMPLETE_TO_DOINCOMPLETE_TO_DO”。/突变的出口默认的的名字“应用程序”数据返回固定待办事项任务空值组件TodoForm基于网络计算待办事项返回任务“看奥扎克第二季”完整的任务“在我很棒的应用程序中使用Vuex”完整的真的completeTodos返回待办事项过滤器待办事项=>待办事项完整的incompleteTodos返回待办事项过滤器待办事项=>待办事项完整的方法onAdd函数美元商店调度ADD_TO_DO待办事项onchange.待办事项如果待办事项完整的美元商店调度COMPLETE_TO_DO待办事项其他的美元商店调度INCOMPLETE_TO_DO待办事项</脚本>

注意,我们使用美元商店注入我们组件的组件中的属性。援引调度()方法将操作分派到存储区,首先指定操作类型和一个可选的有效载荷

Devtools

使用vue-devtools我们可以检查应用程序的状态,并观察操作,以及与操作相关的可选有效负载:

不完整,Dos

结论

使用Vuex State Management Pattern +库使用Vue创建应用程序简单,强大,非常类似于构建具有Angular和NGRX的应用程序。

布莱恩F爱

嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。