从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）

本文由图雀社区成员 Holy 使用 Tuture 实战教程写作工具 写作而成，欢迎加入图雀社区，一起创作精彩的免费技术实战教程，予力编程行业发展。

前面五篇教程我们已经基本实现了迷你全栈电商应用的界面展示以及功能逻辑，相信大家在这个过程中都收获颇丰，并且迈向了全栈工程师的第一步。但是我们却并不满足于此，我们还需要对我们的项目代码进行优化，使得我们的代码可读性更高，也更好维护。相信细心的你们已经感觉到了项目中的store实例实在是过于臃肿，因此，本篇教程就是带大家一起学习如何抽出 Getters 、 Mutations 和Actions 逻辑实现store的“减重”以及如何干掉 mutation-types 硬编码。

欢迎阅读《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用》系列：

• 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（一）
• 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（二）
• 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）
• 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）
• 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（五）
• 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）（也就是这篇）

如果你希望直接从这一步开始，请运行以下命令：

git clone -b section-six https://github.com/tuture-dev/vue-online-shop-frontend.git
cd vue-online-shop-frontend

本文所涉及的源代码都放在了 Github 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点赞+Github仓库加星❤️哦~

抽出 Getters 和 Mutations 逻辑

这一节我们来学习如何抽出在store实例中定义的复杂getters和mutation逻辑。

我们发现之前我们直接把所有的getter属性和方法都定义在了store实例中的getters属性中，所有的mutation属性也都定义在了store实例中的mutations属性中，这样显得store实例特别的累赘，因此我们可以通过对象展开运算符将这些复杂的逻辑抽取到对应的 Getters 和 Mutations文件中。

重构 Admin 入口文件

首先我们做一点本土化，把之前的 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>

这里我们将有关商品的导航栏修改为中文版，让用户能够秒懂；除此之外我们又添加了有关制造商的导航，这里增加的是查看生产商导航，并添加了对应的导航跳转路径，该路径需要与对应路由参数一致。

创建 Manufacturers 组件