Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式

vuex for ngrx devs

学会在使用NGRX的角开发的透视图中使用Vuex应用程序在Vue.js应用程序中构建管理状态。

下载

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

之前

之前,我撰写了关于我使用Vue.js从角开发人员的角度构建简单待办事项列表样式应用程序的经验。在此帖子中,我将继续使用Vuex库来管理应用程序的状态。

NGRX是一个流行的库,用于在角度应用中管理状态。因此,我将从使用NGRX的角度来写这篇文章。FWIW,NGRX的灵感来自Redux库,该库是在反应应用程序中管理状态的流行。我还使用Redux并发现它易于使用和强大。

让我们潜入。

安装

$NPM.安装vuex --save $添加vuex.

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

$MKDIR.SRC / Store $触碰src / store / index.js

打开src / store / index.js文件并调用vue.use()使用Vuex的方法:

进口vue.'vue';进口vuex.'vuex';vue.vuex.;

确定动作

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

以下是我们可能需要待办事项的操作:

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

突变

要开始,让我们定义突变常量。创建一个新的src / store / mutation.js文件。

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

出口constadd_to_do.='addtodo';出口constclear_to_dos.='cleartodos';出口const完全_to_do.='completeTodo';出口constincomplete_to_do.='incompletetodo';出口constremove_to_do.='removetodo';

使用NGRX时,常常为我们应用程序中的“动作类型”定义枚举。所以,这应该看起来很熟悉。实际上,在键盘2.4支持的字符串枚举之前,我们经常使用NGRX使用与我们在VUE应用程序中的突变类型类似的字符串常量使用ngrx时定义了操作类型。

现在我们准备定义了突变我们将导出的对象,以便我们可以将我们的突变加入Vuex商店。突变与使用相同减速器()与ngrx的纯函数将被添加到ActionReducerMap.

出口const突变={[add_to_do.]功能状态去做{去做ID=数学随机的;如果!!去做完全的{去做完全的=错误的;}状态去做;}[clear_to_dos.]功能状态{状态=[];}[完全_to_do.]功能状态去做{去做完全的=真的;}[incomplete_to_do.]功能状态去做{去做完全的=错误的;}[remove_to_do.]功能状态去做{const一世=状态地图去做=>去做ID指数去做ID;如果一世===.-1{返回;}状态拼接一世1;}};

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

每个处理程序功能都收到了状态其次是一个可选的有效载荷派遣了行动。

行动

接下来,让我们定义动作。创建一个新的SRC / Store / Actions.js文件:

进口{add_to_do.clear_to_dos.完全_to_do.incomplete_to_do.remove_to_do.}'./mutations';出口默认{addtodo.{犯罪}去做{犯罪add_to_do.去做;}cleartodos{犯罪}{犯罪clear_to_dos.;}completetodo.{犯罪}去做{犯罪完全_to_do.去做;}incompletetodo{犯罪}去做{犯罪incomplete_to_do.去做;}Removetodo.{犯罪}去做{犯罪remove_to_do.去做;}};

我们将动作定义为函数,接受该操作语境对象以及可选的有效载荷。注意我们正在使用破坏性分配在每个操作的第一个参数中,以便根据对象中的属性定义本地范围变量。

在我们的案件中,我们只关心犯罪财产。这犯罪实例方法使我们能够向商店提交突变。第一个论点是类型第二个论点是行动有效载荷。这是与NGRX使用的Redux派生的相同概念。

创建一个新商店()

打开src / store / index.js文件并添加以下内容以创建新的vuex.store()实例:

进口行动'./actions';进口{突变}'./mutations';出口默认新的vuex.店铺{严格的真的状态{[]}行动突变};

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

  • 严格的属性设置为真的。当我们在开发时,我们这样做,以便每个物体被递归冻结,不能在突变符之外修改。这类似于NGRX-Store-Freeze在开发中应该使用的模块。当然,我们不想在vuex中运行严格模式在生产中。
  • 最初的状态有一个顶级属性是一个空数组。
  • 行动属性注册可以派遣到商店的操作。
  • 突变属性注册将变异(更新)商店的突变。

注射商店

通过我们的行动和突变定义和商店连接,我们的下一个任务是注入店铺进入我们申请中的所有组件。我们会通过这件通过vue.use()定义和导出的方法src / state / index.js模块。

打开src / main.js.并指定这一点店铺在里面新vue()构造函数:

进口店铺'。/店铺';新的vue.{店铺使成为H=>H应用程序}$坐'#应用程序';

派遣行动

我们的商店准备好了让我们派遣()我们的行动应用程序。打开src / app.vue.并实施

<脚本>进口Todoform.'@ / component / todoform.vue';进口多哥主义者'@ / components / todolist.vue';进口{add_to_do.完全_to_do.incomplete_to_do.}'./mutations';出口默认{名称'应用程序'数据{返回{固定的错误的去做{任务空值}};}组件{Todoform.多哥主义者}计算{{返回[{任务'看奥兹克季节2'完全的错误的}{任务'在我令人敬畏的应用程序中使用Vuex'完全的真的}];}completEntodos.{返回筛选去做=>去做完全的;}incompletetodos{返回筛选去做=>!!去做完全的;}}方法{onadd.功能{$商店派遣add_to_do.去做;}onchange.去做{如果去做完全的{$商店派遣完全_to_do.去做;}别的{$商店派遣incomplete_to_do.去做;}}}};</脚本>

注意我们使用$商店注入我们组件的组件中的属性。援引派遣()将动作分配给商店的方法,首先指定动作类型和一个可选的有效载荷

devtools.

使用Vue-devtools.我们可以检查我们的应用状态并遵守与该操作关联的操作,以及可选的有效载荷:

对DOS不完整

结论

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

Brian F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。