这段代码没有什么逻辑可言，就是把所有模块中的mutations中的函数都用一个大写的常量名，简而言之就是按一个大写的规范，把每个模块中mutations中的函数命名，就是一套命名规范。
Vue官方文档的解释：
使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然； 用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。
products模块代码
import { fetchGet } from "@/api/index" // api文件夹下封装的axios.get请求函数 import * as types from '../types' // types目录下的mutations函数的常量名 const state = { recommendList: [] // 存放所有商品的信息 } const getters = {} const mutations = { [types.PRODUCTS_SET_PRODUCT](state, products) { // 第一个参数是state 可以修改state 将请求回来的数据保存在state中 state.recommendList = products } } const actions = { getAllProducts({ commit }) { // 所有的api请求都放在actions中 fetchGet("/cart").then(res => { let allProducts = res.data.list.list commit(types.PRODUCTS_SET_PRODUCT, allProducts) }) } } export default { namespaced: true, // 添加命名空间 state, getters, mutations, actions }
这里我放上recommendList中每一条数据的字段 例如其中一条为:
/* { productid: "11137", name: "小米CC9 Pro 6GB+128GB", price: 2799, image: "//i1.mifile.cn/a1/pms_1572941393.18077211.jpg"， comments: 0 } */
上面代码的逻辑就是在actions中的getAllProducts方法中调用封装在api目录下index.js中的fetchGet()函数请求到数据，commit提交给mutations中的types.PRODUCTS_SET_PRODUCT函数(设置state)，然后去设置所有的商品信息列表recommendList
这里需要注意几点：
products模块中存放着state、getters(这个模块暂时未用到)、mutations、actions，这是分模块每个模块都存在的，最后导出这个模块的四部分；
导出的时候使用了命名空间namespaced: true，命名空间是啥，就是可以让我们模块module分的更加仔细，每个模块中都存放着state、getters、mutations、actions；使用Vue devtools调试工具查看一下Vuex中的状态就很清楚的，就是注意一点，这里使用了命名空间，所有模块都请使用，同时在组件中调用getters、actions等方法时都需要添加模块名称
比如调用actions的时候：
this.$store.dispatch("products/getAllProducts"); methods: mapActions("cart", ["addProductToCart"])
调用getters的时候:
computed: mapGetters("user", ["loginStatus"])
就是需要添加一个模块的前缀名，才能正确执行操作
所有数据的请求都请放在actions中
cart模块代码(核心模块)
我先放一下代码吧，下面再来慢慢解释
import * as types from '../types' const state = { // 购物车需要自己的状态 购物列表 items: [ { productid: "11137", quantity: 1, checkoutStatus: false }, { productid: "8750", quantity: 1, checkoutStatus: false } ] } const getters = { // 返回购物车商品列表完整信息 cartProducts: (state, getters, rootState) => { if (!state.items.length) return [] // map不会对空数组进行检测 map不会改变原始数组 return state.items.map(({ productid, quantity, checkoutStatus }) => { // map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。 const product = rootState.products.recommendList.find(product => product.productid === productid) // 拿到items中的数据去查阅products中的数据, rootState(根节点状态)参数可以拿到别的模块的state状态 if (!product) return {} // action请求异步，如果此时的数据还没有请求回来 就返回空对象 return { src: product.image, // product的图片地址 name: product.name, // product的名字 price: product.price, // product的单价 productid, // product的id quantity, // product的数量，默认为1 simpleTotal: quantity * product.price, // 单项product的总价价 checkoutStatus: checkoutStatus // product的选中状态 } }) }, // 返回选中商品的总价 cartTotalPrice: (state, getters) => { return getters.cartProducts.reduce((total, product) => { if (product.checkoutStatus) { return total + product.simpleTotal } return total }, 0) }, // 返回所有商品总价,不管有没有选中 allPrice: (state, getters) => { return getters.cartProducts.reduce((total, product) => { return total + product.simpleTotal }, 0) }, // 返回所有商品总数量,不管有没有选中 allProducts: (state, getters) => { return getters.cartProducts.reduce((total, product) => { return total + product.quantity }, 0) }, // 返回所有选中的商品数量 allSelectProducts: (state, getters) => { return getters.cartProducts.reduce((total, product) => { if (product.checkoutStatus) { return total + product.quantity } return total }, 0) }, // 返回所有商品条数 allProductsItem: (state) => { return state.items.length }, // 返回商品是否全选 是返回true 否则false isSelectAll: (state) => { if (!state.items.length) return false return state.items.every(item => { // every() 不会对空数组进行检测 return item.checkoutStatus === true }) }, // 返回是否有选中的商品 是返回true 否则false hasSelect: (state) => { if (!state.items.length) return false return state.items.some(item => { // some() 不会对空数组进行检测 return item.checkoutStatus === true }) } } const mutations = { // 添加一条商品的方法 [types.CART_ADD_PRODUCT_TO_CART](state, { productid }) { state.items.push({ productid, quantity: 1, checkoutStatus: false }) }, // 删除一条商品的方法 [types.CART_DEL_PRODUCT_TO_CART](state, productid) { state.items.forEach((item, index) => { if (item.productid === productid) { state.items.splice(index, 1) } }); }, // 增加一条商品中商品数量的方法 [types.CART_ADD_PRODUCT_QUANTITY](state, productid) { const cartItem = state.items.find(item => item.productid == productid) cartItem.quantity++ }, // 减少一条商品中商品数量的方法 [types.CART_DEL_PRODUCT_QUANTITY](state, productid) { const cartItem = state.items.find(item => item.productid == productid) if (cartItem.quantity > 1) { // 商品数量大于1时才能减少 cartItem.quantity-- } else cartItem.quantity = 1 }, // 改变单条商品的选中不选中状态的方法(单选按钮) [types.CART_SET_CHECKOUT_STATUS](state, productid) { const cartItem = state.items.find(item => item.productid == productid) cartItem.checkoutStatus = !cartItem.checkoutStatus }, // 改变所有商品的选中不选中状态的方法(全选按钮) [types.CART_SET_CHECKOUT_STATUS_ALL](state, status) { state.items.forEach(item => { if (!item.checkoutStatus === status) { item.checkoutStatus = status } }) } } const actions = { // 添加购物车的方法,如果此时购物车内有该条商品,就添加商品数量,否则添加商品 addProductToCart({ state, commit }, product) { const cartItem = state.items.find(item => item.productid === product.productid) if (!cartItem) { commit(types.CART_ADD_PRODUCT_TO_CART, { productid: product.productid }) } else { commit(types.CART_ADD_PRODUCT_QUANTITY, cartItem.productid) } }, // 购物车内删除一条商品的方法 delProductToCart({ commit }, productid) { commit(types.CART_DEL_PRODUCT_TO_CART, productid) }, // 添加商品数量的方法 addProductQuantity({ commit }, productid) { commit(types.CART_ADD_PRODUCT_QUANTITY, productid) }, // 减少商品数量的方法 delProductQuantity({ commit }, productid) { commit(types.CART_DEL_PRODUCT_QUANTITY, productid) }, // 切换一条商品的选中状态的方法 setCheckoutStatus({ commit }, productid) { commit(types.CART_SET_CHECKOUT_STATUS, productid) }, // 切换所有商品选中状态的方法 setCheckoutStatusAll({ commit }, status) { commit(types.CART_SET_CHECKOUT_STATUS_ALL, status) } } export default { namespaced: true, // 添加命名空间 state, getters, mutations, actions }