vuex for ngrx devs

2018年11月30日

从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_DO，CLEAR_TO_DOS，COMPLETE_TO_DO，INCOMPLETE_TO_DO，REMOVE_TO_DO｝从”。/突变的；出口默认的｛addTodo（｛提交｝，待办事项）｛提交（ADD_TO_DO，待办事项）；｝，clearTodos（｛提交｝）｛提交（CLEAR_TO_DOS）；｝，completeTodo（｛提交｝，待办事项）｛提交（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_DO，COMPLETE_TO_DO，INCOMPLETE_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的应用程序。