vuex for ngrx devs
从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我们可以检查应用程序的状态,观察动作,以及与动作相关的可选载荷:
结论
使用Vuex State Management Pattern +库使用Vue创建应用程序简单,强大,非常类似于构建具有Angular和NGRX的应用程序。