uni-app开发小程序,笔记记录7 加入购物车

学习地址
零基础玩转微信小程序：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
uniapp - 黑马优购 笔记地址

知识点
1 使用vuex
1 创建 store 文件夹
2 创建 store.js

// 1. 导入 Vue 和 Vuex
// import Vue from 'vue'  vue3 不需要
import Vuex from 'vuex'

// 2. 将 Vuex 安装为 Vue 的插件 vue3 不需要
// Vue.use(Vuex)

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

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

在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：

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

// 省略其它代码...

// #ifdef VUE3
import {
    createSSRApp } from 'vue'
export function createApp() {
   
  const app = createSSRApp(App)
  // 2. 将 store 挂载到 Vue 实例上
  app.use(store)
  return {
   
    app
  }
}
// #endif

创建购物车的 store 模块

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/store.js 模块中，导入并挂载购物车的 vuex 模块，示例代码如下：

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/store.js 模块中，导入并挂载购物车的 vuex 模块，示例代码如下：

// 1. 导入 Vue 和 Vuex
// import Vue from 'vue'  vue3 不需要
import Vuex from 'vuex'

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

// 2. 将 Vuex 安装为 Vue 的插件 vue3 不需要
// Vue.use(Vuex)


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

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

在 goods_detail.vue 页面中，修改 标签中的代码如下：

// 从 vuex 中按需导出 mapState 辅助方法
import {
    mapState } from 'vuex'

export default {
   
  computed: {
   
    // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
    // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
    ...mapState('m_cart', ['cart']),
  },
  // 省略其它代码...
}

注意：今后无论映射 mutations 方法，还是 getters 属性，还是 state 中的数据，都需要指定模块的名称，才能进行映射。

使用测试

  <!-- 运费 -->
 <view class="yf">快递：免运费 -- {
   {
   cart.length}}</view>

二 加入购物车
1 设置购物车添加方法

mutations: {
   
    
    addToCart(state , goods){
   
      const findResult = state.cart.find((x)=> x.goods_id === goods.goods_id)
      
      if(!findResult){
   
        state.cart.push(goods)
      }else{
   
        findResult.goods_count += 1
      }
    }
  },

2 在需要的页面 导入

import {
    mapMutations} from 'vuex'

methods: {
   
    ...mapMutations('m_cart',['addToCart']),    
}

3 加入购物车

	buttonClick(e){
   
        console.log(e)
        if (e.content.text === '加入购物车') {
   
            // 切换到购物车页面
            const goods = {
   
              goods_id : this.goods_info.goods_id, 
              goods_name : this.goods_info.goods_name