Vue.js 框架源码与进阶 - Vuex 状态管理 - 购物车案例

8.5 Vuex 购物车案例

接下来我们通过一个购物车案例来演示 Vuex 在项目中的使用方式，首先把购物车的 项目模板 下载下来。

案例演示

• 完整案例代码仓库

运行项目：

# 第一个进程
node server

# 第二个进程
npm run serve

运行效果：

功能列表

• 商品列表组件
  • 展示商品列表
  • 添加购物车
• 商品列表中弹出框组件
• 购物车列表组件

商品列表

商品列表功能

• Vuex 中创建两个模块，分别用来记录商品列表和购物车的状态，store 的结构：

• products 模块，store/modules/products.js

import axios from 'axios'

const state = {
   
  products: [] // 记录所有商品
}
const getters = {
   }
const mutations = {
   
  // 修改商品数据状态
  setProducts (state, payload) {
   
    state.products = payload
  }
}
// 请求接口获取数据
const actions = {
   
  async getProducts ({
    commit }) {
   
    const {
    data } = await axios({
   
      method: 'GET',
      url: 'http://127.0.0.1:3000/products'
    })
    // 提交 Mutation
    commit('setProducts', data)
  }
}

export default {
   
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

• store/index.js 中注册 products.js 模块

import products from './modules/products'

• views/products.vue 中实现商品列表的功能

import {
    mapState, mapActions } from 'vuex'
export default {
   
  name: 'ProductList',
  computed: {
   
    ...mapState('products', ['products'])
  },
  methods: {
   
    ...mapActions('products', ['getProducts'])
  },
  created () {
   
    this.getProducts()
  }
}

添加购物车

• cart 模块实现添加购物车功能，store/modules/cart.js

const mutations = {
   
  addToCart (state, product) {
   
    // 1. cartProducts 中没有该商品，把该商品(product)添加到数组，
    // 并增加 count=1，isChecked=true，totalPrice
    // 2. cartProducts 有该商品，让商品的数量(count)加1，选中，计算小计
    const prod = state.cartProducts.find(</