vue 两个table 并排_从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）
本文由图雀社区成员 Holy[1] 使用 Tuture[2] 实战教程写作工具 写作而成，欢迎加入图雀社区，一起创作精彩的免费技术实战教程，予力编程行业发展。
前面五篇教程我们已经基本实现了迷你全栈电商应用的界面展示以及功能逻辑，相信大家在这个过程中都收获颇丰，并且迈向了全栈工程师的第一步。但是我们却并不满足于此，我们还需要对我们的项目代码进行优化，使得我们的代码可读性更高，也更好维护。相信细心的你们已经感觉到了项目中的store实例实在是过于臃肿，因此，本篇教程就是带大家一起学习如何抽出 Getters 、 Mutations 和Actions 逻辑实现store的“减重”以及如何干掉 mutation-types 硬编码。
欢迎阅读《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用》系列：
- 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(一)[3]
- 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(二)[4]
- 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(三)[5]
- 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(四)[6]
- 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(五)[7]
- 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(六)(也就是这篇)
如果你希望直接从这一步开始，请运行以下命令：
git clone -b section-six https://github.com/tuture-dev/vue-online-shop-frontend.gitcd vue-online-shop-frontend本文所涉及的源代码都放在了 Github[8] 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点赞+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 组件
我们创建的src/pages/admin/Manufacturers.vue文件是本地制造商组件，用于展示制造商的信息。
<template><div><table class="table"><thead><tr><th>制造商th><th>th><th>th>tr>thead><tbody><tr v-for="manufacturer in manufacturers" :key="manufacturer._id"><td>{{manufacturer.name}}td><td class="modify"><router-link :to="'/admin/manufacturers/edit/' + manufacturer._id">修改router-link>td><td class="remove"><a @click="removeManufacturer(manufacturer._id)" href="#">删除a>td>tr>tbody>table>div>template>
<style>table {margin: 0 auto;}.modify {color: blue;}.remove a {color: red;}style>
<script>export default { created() {if (this.manufacturers.length === 0) {this.$store.dispatch('allManufacturers'); } },computed: { manufacturers() {return this.$store.getters.allManufacturers } },methods: { removeManufacturer(manufacturerId) {// 使用 JavaScript BOM 的 confirm 方法来询问用户是否删除此制造商const res = confirm('是否删除此制造商？');// 如果用户同意，那么就删除此制造商if (res) {this.$store.dispatch('removeManufacturer', { manufacturerId, }) } } }}script>这里首先定义了一个计算属性manufacturers，通过this.$store.getters.allManufacturers属性访问的形式调用对应的getter属性allManufacturers从本地获取manufacturers，并返回给计算属性manufacturers。
然后在该组件刚被创建时判断本地中是否存在manufacturers，如果没有则通过this.$store.dispatch分发到类型为allManufacturers的action中进行异步操作获取所有制造商，并将获取的制造商提交到对应的mutation中，在mutation中修改本地状态，将获取的所有制造商保存到本地。
最后利用v-for在表格中遍历manufacturers，每个制造商的信息在一行展示，除了信息之外还有两个功能(修改和删除制造商)，点击修改则会根据'/admin/manufacturers/edit/' + manufacturer._id路由到指定页面；点击删除则会触发removeManufacturer事件，首先询问用户是否同意删除，若用户同意则将选中制造商的id作为载荷分发到类型为removeManufacturer的action中，在action中进行异步操作删除后端对应商品，并将对应商品id提交到对应的mutation中，在mutation中进行本地状态修改，删除本地对应的商品。
重构 Products 组件
根据Manufacturers组件的设计原则，我们需要再次进入src/pages/admin/Products.vue文件。按照Manufacturers组件的UI展示以及数据处理，将Products组件进行一下重构。
<template><div><table class="table"><thead><tr><th>名称th><th>价格th><th>制造商th><th>th><th>th>tr>thead><tbody><tr v-for="product in products" :key="product._id"><td>{{product.name}}td><td>{{product.price}}td><td>{{product.manufacturer.name}}td><td class="modify"><router-link :to="'/admin/edit/' + product._id">修改router-link>td><td class="remove"><a @click="removeProduct(product._id)" href="#">删除a>td>tr>tbody>table>div>template>
<style>table {margin: 0 auto;}.modify {color: blue;}.remove a {color: red;}style>
<script>export default { created() {if (this.products.length === 0) {this.$store.dispatch('allProducts'); } },computed: { products() {return this.$store.getters.allProducts } },methods: { removeProduct(productId) {// 使用 JavaScript BOM 的 confirm 方法来询问用户是否删除此商品const res = confirm('是否删除此商品？');// 如果用户同意，那么就删除此商品if (res) {this.$store.dispatch('removeProduct', { productId, }) } } }}// ...这部分代码逻辑与src/pages/admin/Manufacturers.vue文件中的代码逻辑相似，如果您理解了上面的代码逻辑，那么我们相信您对这里的代码也能融会贯通，所以这里就不再赘述了。
添加路由信息
我们已经创建了有关制造商的导航以及查看制造商组件，还需对其配置相应的路由参数才能实现跳转。因此再次进入src/router/index.js文件，这里我们导入了制造商组件并增加了制造商相关路由参数。
// ...import New from '@/pages/admin/New';import Products from '@/pages/admin/Products';import Edit from '@/pages/admin/Edit';import Manufacturers from '@/pages/admin/Manufacturers';
Vue.use(Router);
// ... name: 'Edit',component: Edit, }, {path: 'manufacturers',name: 'Manufacturers',component: Manufacturers, }, ] }, {// ...把项目跑起来，点击Admin然后再点击查看生产商，我们可以看到从后端获取的所有生产商： 下面展示的就是从后端获取的制造商，并且我们可以对其进行修改和删除操作。
抽取 Getters 逻辑
我们首先创建了src/store/getters.js文件，用于存放各种不同类型的getter属性和方法。这里我们导出了两个对象分别为productGetters和manufacturerGetters，前者包含了有关商品的getter属性与方法，后者包含了有关制造商的getter属性与方法。
export const productGetters = { allProducts(state) {return state.products },productById: (state, getters) => id => {if (getters.allProducts.length > 0) {return getters.allProducts.filter(product => product._id === id)[0] } else {return state.product; } }}
export const manufacturerGetters = { allManufacturers(state) {return state.manufacturers; }}在productGetters对象中定义的就是有关商品的getter属性和方法，如allProducts，productById等等；在manufacturerGetters对象中定义的就是有关制造商的getter属性和方法，如allManufacturers等等。
我们可以采用属性调用和方法调用的方式调用这里的getter(根据我们在getter对象中定义的是属性还是方法)
抽取 Mutations 逻辑
同样的我们创建了src/store/mutations.js文件，用于存放从store实例的mutations属性中抽取出来的各种mutation属性，这里我们定义了三个对象分别为productMutations，cartMutations以及manufacturerMutations。
export const productMutations = { ALL_PRODUCTS(state) { state.showLoader = true; }, ALL_PRODUCTS_SUCCESS(state, payload) {const { products } = payload;
state.showLoader = false; state.products = products; }, PRODUCT_BY_ID(state) { state.showLoader = true; }, PRODUCT_BY_ID_SUCCESS(state, payload) { state.showLoader = false;
const { product } = payload; state.product = product; }, REMOVE_PRODUCT(state) { state.showLoader = true; }, REMOVE_PRODUCT_SUCCESS(state, payload) { state.showLoader = false;
const { productId } = payload; state.products = state.products.filter(product => product._id !== productId); }};
export const cartMutations = { ADD_TO_CART(state, payload) {const { product } = payload; state.cart.push(product) }, REMOVE_FROM_CART(state, payload) {const { productId } = payload state.cart = state.cart.filter(product => product._id !== productId) },}
export const manufacturerMutations = { ALL_MANUFACTURERS(state) { state.showLoader = true; }, ALL_MANUFACTURERS_SUCCESS(state, payload) {const { manufacturers } = payload;
state.showLoader = false; state.manufacturers = manufacturers; }, REMOVE_MANUFACTURER(state) { state.showLoader = true; }, REMOVE_MANUFACTURER_SUCCESS(state, payload) { state.showLoader = false;
const { manufacturerId } = payload; state.manufacturers = state.manufacturers.filter(manufacturer => manufacturer._id !== manufacturerId); }}在productMutations对象中定义了有关商品响应Vue视图层以及avtion中提交的事件，比如ALL_PRODUCTS，ALL_PRODUCTS_SUCCESS，PRODUCT_BY_ID以及PRODUCT_BY_ID_SUCCESS等等。
在cartMutations对象中定义了有关购物车响应Vue视图层提交的事件，比如ADD_TO_CART，REMOVE_FROM_CART等等。
在manufacturerMutations对象中定义了有关制造商响应Vue视图层以及avtion中提交的事件，比如ALL_MANUFACTURERS，ALL_MANUFACTURERS_SUCCESS，REMOVE_MANUFACTURER以及REMOVE_MANUFACTURER_SUCCESS等等。
重构 Store 实例
我们将store实例中的Getter属性和Mutation属性抽出之后要再进行导入。再回到src/store/index.js文件，这里就是抽离getters和mutations逻辑之后的store实例，看起来是不是轻盈了很多，也增强了代码的可读性。
// ...import Vuex from 'vuex';import axios from 'axios';
import { productGetters, manufacturerGetters } from './getters';import { productMutations, cartMutations, manufacturerMutations } from './mutations';
const API_BASE = 'http://localhost:3000/api/v1';
Vue.use(Vuex);// ... manufacturers: [], },mutations: { ...productMutations, ...cartMutations, ...manufacturerMutations, },getters: { ...productGetters, ...manufacturerGetters, },actions: { allProducts({ commit }) {// ... product: response.data, }); }) }, removeProduct({ commit }, payload) { commit('REMOVE_PRODUCT');
const { productId } = payload; axios.delete(`${API_BASE}/products/${productId}`).then(() => {// 返回 productId，用于删除本地对应的商品 commit('REMOVE_PRODUCT_SUCCESS', { productId, }); }) }, allManufacturers({ commit }) { commit('ALL_MANUFACTURERS');
axios.get(`${API_BASE}/manufacturers`).then(response => { commit('ALL_MANUFACTURERS_SUCCESS', {manufacturers: response.data, }); }) }, removeManufacturer({ commit }, payload) { commit('REMOVE_MANUFACTURER');
const { manufacturerId } = payload; axios.delete(`${API_BASE}/manufacturers/${manufacturerId}`).then(() => {// 返回 manufacturerId，用于删除本地对应的制造商 commit('REMOVE_MANUFACTURER_SUCCESS', { manufacturerId, }); }) }, }});这里首先导入了getters和mutations文件中导出的所有对象，然后在store实例的getters和mutations属性中通过对象展开运算符的方式将对应的属性和方法导入到store实例中。
对象展开运算符是ES7草案中的新特性，将一个对象当中的对象的一部分取出来成为一个新对象赋值给展开运算符的参数，然后插入到另外一个对象当中。例如：
let shortcuts = {attr1: 3,attr2: 4}let shortcuts2 = {}shortcuts2 = {...shortcuts}
//上面的这种用法实际上相当于是：shortcuts2 = {attr1: 3, attr2: 4}除此之外我们又在actions中添加了一些其他的action属性，因为此时actions还未被抽离，所以可能依然显得有些臃肿，不过在后面我们马上也会将它抽离出来。
小结
这一节我们学习了如何抽出Getters和Mutations逻辑，减轻store实例中的负载：
- 首先我们需要分别创建
getters和mutationsJS文件，在两个JS文件中分别定义不同类型的getters和mutations对象并导出，然后在getters和mutations对象中定义相应的一些属性和方法。 - 在
store的index文件中导入这些getters和mutations对象，并在store实例的getters和mutations属性中通过对象展开运算符混入这些对象。 - 我们可以使用
this.$store.getters.属性和this.$store.mutations.属性的方式调用.
抽出 Actions 逻辑
上一节我们学习了如何抽出Getters和Mutations逻辑，这一节我们以同样的方式抽出Actions逻辑。
重构 Edit 组件
src/pages/admin/Edit.vue是商品编辑组件，当触发'/admin/edit/' + product._id就会路由到指定商品信息编辑页面，然后对商品信息进行修改。
之前我们直接将展示商品信息的代码放在该组件中，但是我们发现展示商品信息这部分功能在新建商品和编辑商品组件中都需要使用，因此我们打算把这部分代码封装为一个展示商品信息的表单组件ProductForm，这样的话我们在新建商品和编辑商品组件中都能复用该组件。
除此之外我们还在该组件中添加了数据处理功能。
<template><div><div class="title"><h1>This is Admin/Edith1>div><product-form @save-product="updateProduct":model="model":manufacturers="manufacturers":isEditing="true" >product-form>div>template>
<script>import ProductForm from '@/components/products/ProductForm.vue';export default { created() {const { name } = this.model;if (!name) {this.$store.dispatch('productById', {productId: this.$route.params['id'] }); }if (this.manufacturers.length === 0) {this.$store.dispatch('allManufacturers'); } },computed: { manufacturers() {return this.$store.getters.allManufacturers; }, model() {const product = this.$store.getters.productById(this.$route.params['id']);// 这里返回 product 的拷贝，是为了在修改 product 的拷贝之后，在保存之前不修改本地 Vuex stire 的 product 属性return { ...product, manufacturer: { ...product.manufacturer } }; } },methods: { updateProduct(product) {this.$store.dispatch('updateProduct', { product, }) } },components: {'product-form': ProductForm }}script>我们先来看该组件的script部分，首先定义了两个计算属性model和manufacturers返回本地商品和制造商。通过方法访问的方式调用指定的getter属性productById，参数为当前处于激活状态的路由对象的id，这里返回product的拷贝，是为了在修改 product的拷贝之后，在保存之前不修改本地 Vuex store 的product属性。计算属性manufacturers通过相同的方式获取本地数据。
当该组件刚被创建时判断计算属性model中是否有值，如果没有则表示本地中没有该商品，将包含该商品id的对象作为载荷分发到类型为productById的action中，在action中进行异步操作从后端获取对应商品，并提交到对应类型的mutation中，在mutation中将获取到的商品保存到本地。除此之外判断计算属性manufacturers中是否有值，如果没有则通过相同的方式从后端获取并保存到本地。
在template中使用了子组件ProductForm用表单的形式来展示商品信息，当用户提交表单则会向父组件发射save-product事件，父组件监听到之后触发updateProduct事件，并将传入的商品参数作为载荷分发到类型为updateProduct的action中，通知后端进行同步更新数据并提交到对应的mutation中进行本地数据更新。
重构 New 组件
src/pages/admin/New.vue是添加商品组件，与Edit组件的代码逻辑相似，只是一个是修改商品信息，一个是添加商品信息。
我们将该组件中原先写死的数据改成了从后端动态获取， 并将获取的数据传递给子组件ProductForm。
<template><product-form @save-product="addProduct":model="model":manufacturers="manufacturers" >product-form>template>
<script>import ProductForm from '@/components/products/ProductForm.vue';export default { created() {if (this.manufacturers.length === 0) {this.$store.dispatch('allManufacturers'); } },computed: { manufacturers() {return this.$store.getters.allManufacturers; }, model() {return {}; } },methods: { addProduct(model) {this.$store.dispatch('addProduct', {product: model, }) }, },components: {'product-form': ProductForm }}script>该组件代码逻辑和Edit.vue组件相似，只是在这里我们定义的计算属性model返回一个空对象作为默认值，因为我们是添加商品，本地中还不存在该商品。
抽取 Actions 逻辑
像之前一样我们创建了src/store/actions.js文件，用于存储从store实例的actions属性中抽取出来的不同类型的action属性。这里我们定义了两个Actions对象：productActions和manufacturerActions，分别表示有关商品和制造商对视图层分发的事件作出的响应，并导出了这两个对象。
import axios from 'axios';
const API_BASE = 'http://localhost:3000/api/v1';
export const productActions = { allProducts({ commit }) { commit('ALL_PRODUCTS')
axios.get(`${API_BASE}/products`).then(response => { commit('ALL_PRODUCTS_SUCCESS', {products: response.data, }); }) }, productById({ commit }, payload) { commit('PRODUCT_BY_ID');
const { productId } = payload; axios.get(`${API_BASE}/products/${productId}`).then(response => { commit('PRODUCT_BY_ID_SUCCESS', {product: response.data, }); }) }, removeProduct({ commit }, payload) { commit('REMOVE_PRODUCT');
const { productId } = payload; axios.delete(`${API_BASE}/products/${productId}`).then(() => {// 返回 productId，用于删除本地对应的商品 commit('REMOVE_PRODUCT_SUCCESS', { productId, }); }) }, updateProduct({ commit }, payload) { commit('UPDATE_PRODUCT');
const { product } = payload; axios.put(`${API_BASE}/products/${product._id}`, product).then(() => { commit('UPDATE_PRODUCT_SUCCESS', { product, }); }) }, addProduct({ commit }, payload) { commit('ADD_PRODUCT');
const { product } = payload; axios.post(`${API_BASE}/products`, product).then(response => { commit('ADD_PRODUCT_SUCCESS', {product: response.data, }) }) }};
export const manufacturerActions = { allManufacturers({ commit }) { commit('ALL_MANUFACTURERS');
axios.get(`${API_BASE}/manufacturers`).then(response => { commit('ALL_MANUFACTURERS_SUCCESS', {manufacturers: response.data, }); }) }, removeManufacturer({ commit }, payload) { commit('REMOVE_MANUFACTURER');
const { manufacturerId } = payload; axios.delete(`${API_BASE}/manufacturers/${manufacturerId}`).then(() => {// 返回 manufacturerId，用于删除本地对应的制造商 commit('REMOVE_MANUFACTURER_SUCCESS', { manufacturerId, }); }) },}在该文件中我们首先导入axios依赖，以及定义了 API_BASE 后端接口根路由；
然后我们定义并导出了两个对象：
- 在
productActions对象中定义了一些有关商品在视图层分发对应的事件时，action作出的响应，比如allProducts，productById，removeProduct以及updateProduct等等。 - 在
manufacturerActions对象中定义了一些有关制造商在视图层分发对应的事件时，action作出的响应，比如allManufacturers，removeManufacturer等等。
重构 Store 实例
我们再次来到src/store/index.js文件中，添加有关抽取Actions逻辑之后的信息。
import Vue from 'vue';import Vuex from 'vuex';
import { productGetters, manufacturerGetters } from './getters';import { productMutations, cartMutations, manufacturerMutations } from './mutations';import { productActions, manufacturerActions } from './actions';
Vue.use(Vuex);
// ... actions: { ...productActions, ...manufacturerActions, }});这里我们首先导入了actions.js文件中导出的一些Action对象，并通过对象展开运算符在store实例的actions属性中混入了不同类型的action属性，实现了Actions逻辑的抽取。
添加 mutations 属性
我们在src/store/mutations.js文件中又添加了一些mutation属性，用于用户进行不同的操作进行本地数据的同步。
// ...
const { productId } = payload; state.products = state.products.filter(product => product._id !== productId); }, UPDATE_PRODUCT(state) { state.showLoader = true; }, UPDATE_PRODUCT_SUCCESS(state, payload) { state.showLoader = false;
const { product: newProduct } = payload; state.product = newProduct; state.products = state.products.map(product => {if (product._id === newProduct._id) {return newProduct; }
return product; }) }, ADD_PRODUCT(state) { state.showLoader = true; }, ADD_PRODUCT_SUCCESS(state, payload) { state.showLoader = false;
const { product } = payload; state.products = state.products.concat(product); }};
// ...上述添加的都是有关商品的mutation属性：UPDATE_PRODUCT，UPDATE_PRODUCT_SUCCESS，ADD_PRODUCT以及ADD_PRODUCT_SUCCESS分别表示更新商品信息，更新商品信息成功，添加商品以及添加商品成功。
小结
这一节我们学习了如何抽出Actions逻辑，减轻store实例中的负载：
- 首先我们需要创建
actionsJS文件，在文件中定义不同类型的Actions对象并导出，然后在Actions对象中定义相应的一些属性。 - 在
store的index文件中导入这些Actions对象，并在store实例的actions属性中通过对象展开运算符混入这些对象。 - 我们可以使用
this.$store.actions.属性的方式调用。
干掉 mutation-types 硬编码
这一节我们主要是进一步完善我们的项目功能以及去掉一些硬编码。
创建 ManufacturerForm 组件
和商品信息展示功能一样，我们也需要将制造商信息展示部分封装到一个单独的组件ManufacturerForm中，以便我们在新建制造商和编辑制造商组件中都能复用该组件。
因此我们创建了src/components/ManufacturerForm.vue文件，用于展示制造商信息的表单组件。
<template><form @submit.prevent="saveManufacturer"><div class="form-group"><label>Namelabel><inputtype="text"placeholder="Name"v-model="model.name"name="name"class="form-control" />div>
<div class="form-group new-button"><button class="button"><i class="fa fa-pencil">i>
<span v-if="isEditing">Update Manufacturerspan><span v-else>Add Manufacturerspan>button>div>form>template>
<script>export default {props: ['model', 'isEditing'],methods: { saveManufacturer() {this.$emit('save-manufacturer', this.model) } }}script>该组件通过父子组件传值从父组件获取到了model和isEditing的值，并将model对象的信息展示在表单中。
表单信息中还通过v-if来判断isEditing的值是true还是false，如果是true则创建Update Manufacturer，反之创建Add Manufacturer。
当用户提交表单时触发saveManufacturer事件，此时会向父组件发送类型为save-manufacturer的事件通知其保存此次的修改操作。
重构 getters 文件
在创建编辑制造商组件之前，我们需要在getters文件中添加对应的getter属性。
我们在src/store/getters.js文件的manufacturerGetters对象中又添加了一个manufacturerById方法，用于获取本地中指定的制造商。
// ...export const manufacturerGetters = { allManufacturers(state) {return state.manufacturers; },manufacturerById: (state, getters) => id => {if (getters.allManufacturers.length > 0) {return getters.allManufacturers.filter(manufacturer => manufacturer._id === id)[0] } else {return state.manufacturer; } }}manufacturerById方法中的id参数是Vue视图层通过方法调用时传入的id，通过这个id判断本地中是否存在该制造商，如果存在则返回该制造商，如果不存在则返回一个空对象。
创建 EditManufacturers 组件
在创建了展示制造商信息的表单组件ManufacturerForm以及添加了用于获取本地指定制造商数据的getter属性之后，紧接着我们又创建了src/pages/admin/EditManufacturers.vue文件，用于修改制造商信息。
<template><manufacturer-form @save-manufacturer="addManufacturer":model="model":isEditing="true" >manufacturer-form>template>
<script>import ManufacturerForm from '@/components/ManufacturerForm.vue';export default { created() {this.$store.dispatch('manufacturerById', {manufacturerId: this.$route.params['id'] }); },computed: { model() {const manufacturer = this.$store.getters.manufacturerById(this.$route.params['id']);// 这里返回 product 的拷贝，是为了在修改 product 的拷贝之后，在保存之前不修改本地 Vuex stire 的 product 属性return { ...manufacturer }; } },methods: { addManufacturer(model) {this.$store.dispatch('updateManufacturer', {manufacturer: model, }) }, },components: {'manufacturer-form': ManufacturerForm }}script>该组件刚被创建时将当前处于激活状态的路由对象的id参数作为载荷分发到类型为manufacturerById的action中，在action中进行异步操作从服务器获取对应制造商，然后将该制造商提交到对应mutation中进行本地状态修改，将获取到的制造商保存到本地。
我们定义了计算属性model返回manufacturer的拷贝，是为了在修改manufacturer的拷贝之后，在保存之前不修改本地 store中的manufacturer属性。这里以方法访问的形式从getters中通过当前激活的路由对象中的id参数获取本地状态中的对应制造商作为manufacturer的拷贝，并返回给计算属性model，然后传给子组件ManufacturerForm。
该组件在addManufacturer事件中将子组件传入的新制造商对象作为载荷分发到类型为updateManufacturer的action中，在action中进行异步操作修改后端对应的商品信息，然后将新对象提交到对应的mutation中进行本地状态修改，修改本地状态中的manufacturer对象。
创建 NewManufacturers 组件
同样的我们继续创建了src/pages/admin/NewManufacturers.vue文件，用于添加制造商信息。该组件和添加商品信息组件代码逻辑类似。
<template><manufacturer-form @save-manufacturer="addManufacturer":model="model" >manufacturer-form>template>
<script>import ManufacturerForm from '@/components/ManufacturerForm.vue';export default {computed: { model() {return {}; } },methods: { addManufacturer(model) {this.$store.dispatch('addManufacturer', {manufacturer: model, }) }, },components: {'manufacturer-form': ManufacturerForm }}script>该组件逻辑代码与New.vue组件类似，一个是添加商品组件，一个是添加制造商组件，您可以对比着来看。
重构 Admin 入口文件
之前我们在该入口文件中增加了查看生产商导航，这里我们又增加了添加生产商导航。
// ...<li><router-link to="/admin/manufacturers">查看生产商router-link>li><li><router-link to="/admin/manufacturers/new">添加生产商router-link>li>ul>div><router-view>router-view> // ...添加路由信息
我们已经创建了添加和修改制造商组件以及添加了对应的入口导航，接着我们需要在该文件中对其进行路由参数配置。
再次进入src/router/index.js文件，我们导入了添加制造商和修改制造商的组件并配置了相关路由参数。
// ...import Products from '@/pages/admin/Products';import Edit from '@/pages/admin/Edit';import Manufacturers from '@/pages/admin/Manufacturers';import NewManufacturers from '@/pages/admin/NewManufacturers';import EditManufacturers from '@/pages/admin/EditManufacturers';
Vue.use(Router);
// ... name: 'Manufacturers',component: Manufacturers, }, {path: 'manufacturers/new',name: 'NewManufacturers',component: NewManufacturers, }, {path: 'manufacturers/edit/:id',name: 'EditManufacturers',component: EditManufacturers, }, ] }, {// ...这里添加制造商的路由配置就是静态路由的配置方式；修改制造商的路由配置采用了动态传参的方式，这里使用的是$route.params对象的Post方式传参。
配置好添加制造商和修改制造商的路由参数之后，我们又可以进行验收啦，运行项目，点击Admin然后再点击添加制造商，我们可以看到添加制造商的表单： 然后再点击查看制造商，我们又可以看到一系列的制造商，并且每个制造商都对应的有修改和删除操作，这里我们随便选择一个制造商进行修改，就会看到该制造商的表单信息：
创建 mutation-types 文件
这一节我们将对我们的项目代码进行优化，干掉一些硬编码。
我们都知道在actions文件和mutations文件中有一部分的事件类型是需要保持一致的，比如在我们在视图层分发一个添加商品事件ADD_PRODUCT，在actions文件中就需要有对应事件类型的action接收，然后向后端发起请求并将请求结果提交到对应类型的mutation中，这就要求了这几个文件中的对应事件类型都要保持一致。可是我们在开发过程中难免会出错，比如漏掉一个字母就会导致两个文件中的对应事件无法接收，尴尬的是控制台也没有报错，这就造成了我们很难查错。
因此，我们采用了字符串常量的形式定义actions文件和mutations文件中的事件类型，只要我们写错一个单词都会导致字符串常量不一致，关键的是这个时候会报错，利于我们查错。
进而我们创建了src/store/mutation-types.js文件，用于定义一些字符串常量来表示各种事件类型，并导出这些字符串常量。
export const ALL_PRODUCTS = 'ALL_PRODUCTS';export const ALL_PRODUCTS_SUCCESS = 'ALL_PRODUCTS_SUCCESS';
export const PRODUCT_BY_ID = 'PRODUCT_BY_ID';export const PRODUCT_BY_ID_SUCCESS = 'PRODUCT_BY_ID_SUCCESS';
export const ADD_PRODUCT = 'ADD_PRODUCT';export const ADD_PRODUCT_SUCCESS = 'ADD_PRODUCT_SUCCESS';
export const UPDATE_PRODUCT = 'UPDATE_PRODUCT';export const UPDATE_PRODUCT_SUCCESS = 'UPDATE_PRODUCT_SUCCESS';
export const REMOVE_PRODUCT = 'REMOVE_PRODUCT';export const REMOVE_PRODUCT_SUCCESS = 'REMOVE_PRODUCT_SUCCESS';
export const ADD_TO_CART = 'ADD_TO_CART';export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const ALL_MANUFACTURERS = 'ALL_MANUFACTURER';export const ALL_MANUFACTURERS_SUCCESS = 'ALL_MANUFACTURER_S';
export const MANUFACTURER_BY_ID = 'MANUFACTURER_BY_ID';export const MANUFACTURER_BY_ID_SUCCESS = 'MANUFACTURER_BY_ID_SUCCESS';
export const ADD_MANUFACTURER = 'ADD_MANUFACTURER';export const ADD_MANUFACTURER_SUCCESS = 'ADD_MANUFACTURER_SUCCESS';
export const UPDATE_MANUFACTURER = 'UPDATE_MANUFACTURER';export const UPDATE_MANUFACTURER_SUCCESS = 'UPDATE_MANUFACTURER_SUCCESS';
export const REMOVE_MANUFACTURER = 'REMOVE_MANUFACTURER';export const REMOVE_MANUFACTURER_SUCCESS = 'REMOVE_MANUFACTURER_SUCCESS';重构 actions 文件
我们再次来到src/store/actions.js文件中，将所有的事件类型用字符串常量表示。
import axios from 'axios';
import { ADD_PRODUCT, ADD_PRODUCT_SUCCESS, PRODUCT_BY_ID, PRODUCT_BY_ID_SUCCESS, UPDATE_PRODUCT, UPDATE_PRODUCT_SUCCESS, REMOVE_PRODUCT, REMOVE_PRODUCT_SUCCESS, ALL_PRODUCTS, ALL_PRODUCTS_SUCCESS, ALL_MANUFACTURERS, ALL_MANUFACTURERS_SUCCESS, MANUFACTURER_BY_ID, MANUFACTURER_BY_ID_SUCCESS, ADD_MANUFACTURER, ADD_MANUFACTURER_SUCCESS, UPDATE_MANUFACTURER, UPDATE_MANUFACTURER_SUCCESS, REMOVE_MANUFACTURER, REMOVE_MANUFACTURER_SUCCESS,} from './mutation-types';
const API_BASE = 'http://localhost:3000/api/v1';
export const productActions = { allProducts({ commit }) { commit(ALL_PRODUCTS)
axios.get(`${API_BASE}/products`).then(response => { commit(ALL_PRODUCTS_SUCCESS, {products: response.data, }); }) }, productById({ commit }, payload) { commit(PRODUCT_BY_ID);
const { productId } = payload; axios.get(`${API_BASE}/products/${productId}`).then(response => { commit(PRODUCT_BY_ID_SUCCESS, {product: response.data, }); }) }, removeProduct({ commit }, payload) { commit(REMOVE_PRODUCT);
const { productId } = payload; axios.delete(`${API_BASE}/products/${productId}`).then(() => {// 返回 productId，用于删除本地对应的商品 commit(REMOVE_PRODUCT_SUCCESS, { productId, }); }) }, updateProduct({ commit }, payload) { commit(UPDATE_PRODUCT);
const { product } = payload; axios.put(`${API_BASE}/products/${product._id}`, product).then(() => { commit(UPDATE_PRODUCT_SUCCESS, { product, }); }) }, addProduct({ commit }, payload) { commit(ADD_PRODUCT);
const { product } = payload; axios.post(`${API_BASE}/products`, product).then(response => { commit(ADD_PRODUCT_SUCCESS, {product: response.data, }) })// ...
export const manufacturerActions = { allManufacturers({ commit }) { commit(ALL_MANUFACTURERS);
axios.get(`${API_BASE}/manufacturers`).then(response => { commit(ALL_MANUFACTURERS_SUCCESS, {manufacturers: response.data, }); }) }, manufacturerById({ commit }, payload) { commit(MANUFACTURER_BY_ID);
const { manufacturerId } = payload; axios.get(`${API_BASE}/manufacturers/${manufacturerId}`).then(response => { commit(MANUFACTURER_BY_ID_SUCCESS, {manufacturer: response.data, }); }) }, removeManufacturer({ commit }, payload) { commit(REMOVE_MANUFACTURER);
const { manufacturerId } = payload; axios.delete(`${API_BASE}/manufacturers/${manufacturerId}`).then(() => {// 返回 manufacturerId，用于删除本地对应的制造商 commit(REMOVE_MANUFACTURER_SUCCESS, { manufacturerId, }); }) }, updateManufacturer({ commit }, payload) { commit(UPDATE_MANUFACTURER);
const { manufacturer } = payload; axios.put(`${API_BASE}/manufacturers/${manufacturer._id}`, manufacturer).then(() => { commit(UPDATE_MANUFACTURER_SUCCESS, { manufacturer, }); }) }, addManufacturer({ commit }, payload) { commit(ADD_MANUFACTURER);
const { manufacturer } = payload; axios.post(`${API_BASE}/manufacturers`, manufacturer).then(response => { commit(ADD_MANUFACTURER_SUCCESS, {manufacturer: response.data, }) }) }}这里我们首先导入了mutation-types文件中定义的一些字符串常量，替换掉了对应的事件类型。
重构 mutations 文件
同actions文件一样，我们再次进入src/store/mutations.js文件，将文件中的各种事件类型用字符串常量替代。
import { ADD_PRODUCT, ADD_PRODUCT_SUCCESS, PRODUCT_BY_ID, PRODUCT_BY_ID_SUCCESS, UPDATE_PRODUCT, UPDATE_PRODUCT_SUCCESS, REMOVE_PRODUCT, REMOVE_PRODUCT_SUCCESS, ADD_TO_CART, REMOVE_FROM_CART, ALL_PRODUCTS, ALL_PRODUCTS_SUCCESS, ALL_MANUFACTURERS, ALL_MANUFACTURERS_SUCCESS, MANUFACTURER_BY_ID, MANUFACTURER_BY_ID_SUCCESS, ADD_MANUFACTURER, ADD_MANUFACTURER_SUCCESS, UPDATE_MANUFACTURER, UPDATE_MANUFACTURER_SUCCESS, REMOVE_MANUFACTURER, REMOVE_MANUFACTURER_SUCCESS,} from './mutation-types';
export const productMutations = { [ALL_PRODUCTS](state "ALL_PRODUCTS") { state.showLoader = true; }, [ALL_PRODUCTS_SUCCESS](state, payload "ALL_PRODUCTS_SUCCESS") {const { products } = payload;
state.showLoader = false; state.products = products; }, [PRODUCT_BY_ID](state "PRODUCT_BY_ID") { state.showLoader = true; }, [PRODUCT_BY_ID_SUCCESS](state, payload "PRODUCT_BY_ID_SUCCESS") { state.showLoader = false;
const { product } = payload; state.product = product; }, [REMOVE_PRODUCT](state "REMOVE_PRODUCT") { state.showLoader = true; }, [REMOVE_PRODUCT_SUCCESS](state, payload "REMOVE_PRODUCT_SUCCESS") { state.showLoader = false;
const { productId } = payload; state.products = state.products.filter(product => product._id !== productId); }, [UPDATE_PRODUCT](state "UPDATE_PRODUCT") { state.showLoader = true; }, [UPDATE_PRODUCT_SUCCESS](state, payload "UPDATE_PRODUCT_SUCCESS") { state.showLoader = false;
const { product: newProduct } = payload;// ...return product; }) }, [ADD_PRODUCT](state "ADD_PRODUCT") { state.showLoader = true; }, [ADD_PRODUCT_SUCCESS](state, payload "ADD_PRODUCT_SUCCESS") { state.showLoader = false;
const { product } = payload;// ...};
export const cartMutations = { [ADD_TO_CART](state, payload "ADD_TO_CART") {const { product } = payload; state.cart.push(product) }, [REMOVE_FROM_CART](state, payload "REMOVE_FROM_CART") {const { productId } = payload state.cart = state.cart.filter(product => product._id !== productId) },};
export const manufacturerMutations = { [ALL_MANUFACTURERS](state "ALL_MANUFACTURERS") { state.showLoader = true; }, [ALL_MANUFACTURERS_SUCCESS](state, payload "ALL_MANUFACTURERS_SUCCESS") {const { manufacturers } = payload;
state.showLoader = false; state.manufacturers = manufacturers; }, [MANUFACTURER_BY_ID](state "MANUFACTURER_BY_ID") { state.showLoader = true; }, [MANUFACTURER_BY_ID_SUCCESS](state, payload "MANUFACTURER_BY_ID_SUCCESS") { state.showLoader = false;
const { manufacturer } = payload; state.manufacturer = manufacturer; }, [REMOVE_MANUFACTURER](state "REMOVE_MANUFACTURER") { state.showLoader = true; }, [REMOVE_MANUFACTURER_SUCCESS](state, payload "REMOVE_MANUFACTURER_SUCCESS") { state.showLoader = false;
const { manufacturerId } = payload; state.manufacturers = state.manufacturers.filter(manufacturer => manufacturer._id !== manufacturerId); }, [UPDATE_MANUFACTURER](state "UPDATE_MANUFACTURER") { state.showLoader = true; }, [UPDATE_MANUFACTURER_SUCCESS](state, payload "UPDATE_MANUFACTURER_SUCCESS") { state.showLoader = false;
const { manufacturer: newManufacturer } = payload; state.manufacturers = state.manufacturers.map(manufacturer => {if (manufacturer._id === newManufacturer._id) {return newManufacturer; }
return manufacturer; }) }, [ADD_MANUFACTURER](state "ADD_MANUFACTURER") { state.showLoader = true; }, [ADD_MANUFACTURER_SUCCESS](state, payload "ADD_MANUFACTURER_SUCCESS") { state.showLoader = false;
const { manufacturer } = payload; state.manufacturers = state.manufacturers.concat(manufacturer); }}这里我们首先导入了mutation-types文件中定义的一些字符串常量，替换掉了对应的事件类型。
小结
这一节我们主要做了以下工作：
- 创建了制造商相关组件并配置了相应路由参数，实现了新建和修改制造商信息；
- 利用字符串常量代替actions文件和mutations文件中的事件类型；
想要学习更多精彩的实战技术教程？来图雀社区[9]逛逛吧。
本文所涉及的源代码都放在了 Github[10] 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点赞+Github仓库加星❤️哦
参考资料
[1]
Holy: https://blog.csdn.net/weixin_45489416
[2]
Tuture: https://github.com/tuture-dev/tuture
[3]
从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(一): https://juejin.im/post/5dfd851c6fb9a0163e248463
[4]
从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(二): https://juejin.im/post/5dff8da76fb9a01634475731
[5]
从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(三): https://juejin.im/post/5e10a4665188253a800423a5
[6]
从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(四): https://juejin.im/post/5e1967cd6fb9a02fbc4ac6e6
[7]
从零到部署：用 Vue 和 Express 实现迷你全栈电商应用(五): https://juejin.im/post/5e40bd0ce51d4526fe650232
[8]
Github: https://github.com/tuture-dev/vue-online-shop-frontend
[9]
图雀社区: https://tuture.co?utm_source=juejin_zhuanlan
[10]
Github: https://github.com/tuture-dev/vue-online-shop-frontend
● 一杯茶的时间，上手React框架开发
● 一杯茶的时间，上手 Docker
● 梦境亦相通：上手 Docker Network
·END·
图雀社区
汇聚精彩的免费实战教程
关注公众号回复 z 拉学习交流群
喜欢本文，点个“在看”告诉我
vue 两个table 并排_从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）相关推荐
- 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）
随着前端应用的日渐复杂,状态和数据管理成为了构建大型应用的关键.受 Redux 等项目的启发,Vue.js 团队也量身定做了状态管理库 Vuex.在这篇教程中,我们将带你熟悉 Store.Mutati ...
- 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）
这篇文章中,我们将讲解 Vue 实例的 Props 和 Methods,接着我们又讲解了最常见的 Vue 模板语法,并通过实例的方式将这些模板语法都实践了一番,最后我们讲解了 Vue 组件的组合,并完 ...
- 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（最终篇）
本文由图雀社区成员 mRc[1] 写作而成,欢迎加入图雀社区[2],一起创作精彩的免费技术教程,予力编程行业发展. 如果您觉得我们写得还不错,记得 点看 ,鼓励我们写出更好的教程???? 本篇我们将实 ...
- （4.2万字，重启2020）“从零到部署”Vue全栈电商应用系列教程---正式完结
作者:一只图雀 Github仓库:(前端[1],后端[2]) 图雀社区主站(首发):图雀社区[3] 博客:掘金[4].知乎[5].慕课[6] 公众号:图雀社区[7] 联系我:关注公众号后可以加图雀酱微 ...
- css怎么让两个table并排_关于CSS布局
水平居中 水平居中可能是CSS布局中最常用到的布局,这里介绍几种水平居中的方式 1.使用inline-block 和 text-align实现 .parent{text-align: center;} ...
- vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】
文章目录 本人其他相关文章链接 项目介绍:此项目是基于vue2的前台电商项目和后台管理系统 此项目为在线电商Web App (SPA) 包括首页, 搜索列表, 商品详情, 购物车, 订单, 支付, 用 ...
- vue项目调用通用组件_详细解析：uniapp项目|vue组件形式实现的科技感loading纯CSS动效...
前言 本人是一枚并不安分守己的后端程序猿,一直对前端开发"垂涎三尺",所以,一有机会就会"不务正业"一番.最近,发现了一个非常好的学习资料,于是乎,我的老毛病又 ...
- vue如何在末尾添加_怎样在Linux上开发vue项目
一.开发环境搭建:安装node.js环境以及vue cli工具 (1)安装node.js 从官网下载对应的二进制压缩包,如下图: 01.png 解压到程序安装目录 xz -d node-v12.17. ...
- [Vue.js]实战 -- 电商项目(六)
商品管理 商品管理概述 用于维护电商平台的商品信息 包括商品的类型.参数.图片.详情等信息.通过商品管理模块可以实现商品的添加.修改.展示和删除等功能 商品列表 实现商品列表布局效果 调用后台接口获取 ...
最新文章
- 影著协公布的使用费收取标准
- c++ eos智能合约开发_干货｜EOS智能合约开发（一）EOS环境搭建和启动节点
- swift学习之set和get方法
- leetcode - 264. 丑数 II
- JS中的基本数据类型与引用数据类型
- 人受失败后多久可以做第二次_做完皮秒多久可以用自己的护肤产品、过来人分享皮秒后怎么护肤？...
- .NET进销存系统开发笔记------之Gridview应用
- Axure元件-内联框架设计网页
- python命名规则下划线list_详解 Python 中的下划线命名规则
- 软件调试是鸡肋？你的认知决定你的层次！
- MathType安装时遇到不能删除xx字体时的解决方法
- win10一根网线连接linux,细说win10系统使用一根网线连接两台电脑的设置教程_
- 基于python的音乐数据分析_基于Python的亚马逊音乐产品评论分析
- Swift 七种手势
- 跌倒综述 Deep Learning Based Systems Developed for Fall Detection A Review
- uni-app H5打包上线流程
- Redmi Note 10 root权限 刷机教程,红米note10 root 线刷救砖包
- 为什么都有API网关？聊聊API网关的作用
- Informix IDS 11体系管理(918测验)认证指南,第 5 局部: 数据库效劳器把持(2)
- Mac关闭SIP方法
热门文章
- 图片流量节省60%：基于CDN的sharpP自适应图片技术实践
- poj 1696 Space Ant
- 快速撑握C#知识点之类的数据成员
- .net 时间操作（datetime数据类型，datetime方法）
- 人生永无止境的意思是什么_《永无止境》中艾迪真的成功改进了NZT吗？
- java 为何 无效_java – 为什么compareTo无效导致Collections.sor...
- 计算机90学时培训小结,90学时培训学习心得体会
- 汇编语言二进制转十进制_汇编语言笔记(一)——基础知识
- php商品秒杀时间代码,Thinkphp5+Redis实现商品秒杀代码实例讲解
- 软件测试面试-在工作中功能，接口，性能，自动化的占比是多少？