vuex for ngrx devs

2018年11月30日

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

下载

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

以前

在此之前,我从Angular开发者的角度讲述了我使用Vue.js构建一个简单的待办事项样式应用程序的经验。在这篇文章中，我将继续使用Vuex库管理应用程序的状态。

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

就让我们一探究竟吧。

安装

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

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

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

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

进口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 ()实例，指定以下选项:

的严格的属性设置为真正。我们在开发过程中这样做，以便每个对象都被递归地冻结，并且不能在突变体之外修改。这类似于ngrx-store-freeze在开发中应该使用的模块。当然，我们不想让Vuex进来严格模式在生产中。
最初的状态要拥有顶层待办事项属性，该属性为空数组。
的行动属性注册可以分派到存储区的操作。
的突变属性注册将使存储发生突变(更新)的突变。

注入商店

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

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

进口商店从”。/存储的;新Vue({商店,渲染:h=>h(应用程序)})。$坐('#app');

调度操作

我们的店都准备好了调度()从我们的行动应用程序。开放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的应用程序。