本文由图雀社区成员 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
抽出 Getters 和 Mutations 逻辑本文所涉及的源代码都放在了 Github 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点赞+Github仓库加星❤️哦~
这一节我们来学习如何抽出在store实例中定义的复杂getters和mutation逻辑。
我们发现之前我们直接把所有的getter属性和方法都定义在了store实例中的getters属性中，所有的mutation属性也都定义在了store实例中的mutations属性中，这样显得store实例特别的累赘，因此我们可以通过对象展开运算符将这些复杂的逻辑抽取到对应的 Getters 和 Mutations文件中。
重构 Admin 入口文件首先我们做一点本土化，把之前的 src/pages/admin/Index.vue 中的英文导航改成中文版，方便查看；并且我们增加了查看生产商导航。
这里我们将有关商品的导航栏修改为中文版，让用户能够秒懂；除此之外我们又添加了有关制造商的导航，这里增加的是查看生产商导航，并添加了对应的导航跳转路径，该路径需要与对应路由参数一致。
创建 Manufacturers 组件我们创建的src/pages/admin/Manufacturers.vue文件是本地制造商组件，用于展示制造商的信息。
制造商
{{manufacturer.name}}
修改 删除
这里首先定义了一个计算属性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组件进行一下重构。
名称
价格
制造商
{{product.name}}
{{product.price}}
{{product.manufacturer.name}}
修改 删除
我们先来看该组件的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。
该组件代码逻辑和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等等。
我们再次来到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.属性的方式调用。
这一节我们主要是进一步完善我们的项目功能以及去掉一些硬编码。
创建 ManufacturerForm 组件和商品信息展示功能一样，我们也需要将制造商信息展示部分封装到一个单独的组件ManufacturerForm中，以便我们在新建制造商和编辑制造商组件中都能复用该组件。
因此我们创建了src/components/ManufacturerForm.vue文件，用于展示制造商信息的表单组件。
该组件通过父子组件传值从父组件获取到了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文件，用于修改制造商信息。
该组件刚被创建时将当前处于激活状态的路由对象的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文件，用于添加制造商信息。该组件和添加商品信息组件代码逻辑类似。
该组件逻辑代码与New.vue组件类似，一个是添加商品组件，一个是添加制造商组件，您可以对比着来看。
重构 Admin 入口文件之前我们在该入口文件中增加了查看生产商导航，这里我们又增加了添加生产商导航。
// ...
查看生产商
添加生产商
