uni-app购物车的实现

前言

在电商项目中，购物车是电商项目的灵魂，支付是电商项目的血液，电商项目中离不开购物车。

开始了

第一步 加入购物车

1. 在vuex中新建一个store.js文件,并且在store.js 文件中添加如下4个初识化Store的实例对象

// 1. 导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)

// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
   
  // TODO：挂载 store 模块
  modules: {
   },
})

// 4. 向外共享 Store 的实例对象
export default store

2. 在 main.js 文件中导入store并且挂载到Vue实例上：

// 1. 导入 store 的实例对象
import store from './store/store.js'

// 省略其它代码...

const app = new Vue({
   
  ...App,
  // 2. 将 store 挂载到 Vue 实例上
  store,
})
app.$mount()

3. 在store 目录上鼠标右键 新建一个cart.js文件，并且在cart.js中，初始化如下面的vuex模块

export default {
   
  // 为当前模块开启命名空间
  namespaced: true,

  // 模块的 state 数据
  state: () => ({
   
    // 购物车的数组，用来存储购物车中每个商品的信息对象
    // 每个商品的信息对象，都包含如下 6 个属性：
    // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
    cart: [],
  }),

  // 模块的 mutations 方法
  mutations: {
   },

  // 模块的 getters 属性
  getters: {
   },
}

且在store.js文件中，导入并且挂载到modules中去

import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入购物车的 vuex 模块
import moduleCart from './cart.js'

Vue.use(Vuex)

const store = new Vuex.Store({
   
  // TODO：挂载 store 模块
  modules: {
   
    // 2. 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
    //    购物车模块中 cart 数组的访问路径是 m_cart/cart
    m_cart: moduleCart,
  },
})

export default store

实现加入购物车的功能
在 store 目录下的 cart.js 模块中，封装一个将商品信息加入购物车的 mutations 方法，命名为 addToCart。示例代码如下：

export default {
   
  // 为当前模块开启命名空间
  namespaced: true,

  // 模块的 state 数据
  state: () => ({
   
    // 购物车的数组，用来存储购物车中每个商品的信息对象
    // 每个商品的信息对象，都包含如下 6 个属性：
    // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
    cart: [],
  }),

  // 模块的 mutations 方法
  mutations: {
   
    addToCart(state, goods) {
   
      // 根据提交的商品的Id，查询购物车中是否存在这件商品
      // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象
      const findResult = state.cart.find((x) => x.goods_id === goods.goods_id)

      if (!findResult) {
   
        // 如果购物车中没有这件商品，则直接 push
        state.cart.push(goods)
      } else {
   
        // 如果购物车中有这件商品，则只更新数量即可
        findResult.goods_count++
      }
    },
  },

  // 模块的 getters 属性
  getters: {
   },
}

在商品详情页面中，通过 mapMutations 这个辅助方法，把 vuex 中 m_cart 模块下的 addToCart 方法映射到当前页面,为商品导航组件 uni-goods-nav 绑定 @buttonClick=“buttonClick” 事件处理函数：

// 按需导入 mapMutations 这个辅助方法
import {
    mapMutations } from 'vuex'

export default {
   
  methods: {
   
    // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用