前面五篇教程我们已经基本实现了迷你全栈电商应用的界面展示以及功能逻辑,相信大家在这个过程中都收获颇丰,并且迈向了全栈工程师的第一步。但是我们却并不满足于此,我们还需要对我们的项目代码进行优化,使得我们的代码可读性更高,也更好维护。相信细心的你们已经感觉到了项目中的store实例实在是过于臃肿,因此,本篇教程就是带大家一起学习如何抽出 Getters 、 Mutations 和Actions 逻辑实现store的“减重”以及如何干掉 mutation-types 硬编码。
欢迎阅读《从零到部署:用 Vue 和 Express 实现迷你全栈电商应用》系列:
如果你希望直接从这一步开始,请运行以下命令:
git clone -b section-six https://github.com/tuture-dev/vue-online-shop-frontend.git cd vue-online-shop-frontend
本文所涉及的源代码都放在了 Github 上,如果您觉得我们写得还不错,希望您能给❤️这篇文章点赞+Github仓库加星❤️哦~
这一节我们来学习如何抽出在store
实例中定义的复杂getters
和mutation
逻辑。
我们发现之前我们直接把所有的getter
属性和方法都定义在了store
实例中的getters
属性中,所有的mutation
属性也都定义在了store
实例中的mutations
属性中,这样显得store
实例特别的累赘,因此我们可以通过对象展开运算符将这些复杂的逻辑抽取到对应的 Getters
和 Mutations
文件中。
首先我们做一点本土化,把之前的 src/pages/admin/Index.vue
中的英文导航改成中文版,方便查看;并且我们增加了查看生产商导航。
<template> <div> <div class="admin-new"> <div class="container"> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <ul class="admin-menu"> <li> <router-link to="/admin">查看商品</router-link> </li> <li> <router-link to="/admin/new">添加商品</router-link> </li> <li> <router-link to="/admin/manufacturers">查看生产商</router-link> </li> </ul> </div> <router-view></router-view> </div> </div> </div> </template>
这里我们将有关商品的导航栏修改为中文版,让用户能够秒懂;除此之外我们又添加了有关制造商的导航,这里增加的是查看生产商导航,并添加了对应的导航跳转路径,该路径需要与对应路由参数一致。