【 uniapp - 黑马优购 | 加入购物车】如何配置 vuex、加入购物车功能并持久化

news2024/11/15 22:23:30

在这里插入图片描述

在这里插入图片描述

个人名片：

🐼作者简介：一名大二在校生，讨厌编程🎋
🐻‍❄️个人主页🥇：小新爱学习.
🐼个人WeChat：hmmwx53
🕊️系列专栏：🖼️

  • 零基础学Java——小白入门必备
  • 重识C语言——复习回顾
  • 计算机网络体系———深度详讲
  • 微信小程序开发——实战开发
  • 基于黑马优选的小程序开发实战教程

🐓每日一句：🍭努力的意义是给所爱之人一个美好的未来！

文章目录

  • 8. 加入购物车
    • 8.0 创建 cart 分支
    • 8.1 配置 vuex
    • 8.2 创建购物车的 store 模块
    • 8.3 在商品详情页中使用 Store 中的数据
    • 8.4 实现加入购物车的功能
    • 8.5 动态统计购物车中商品的总数量
    • 8.6 持久化存储购物车中的商品
    • 8.7 优化商品详情页的 total 侦听器
    • 8.8 动态为 tabBar 页面设置数字徽标
    • 8.9 将设置 tabBar 徽标的代码抽离为 mixins

8. 加入购物车

8.0 创建 cart 分支

运行如下的命令，基于 master 分支在本地创建 cart 子分支，用来开发购物车相关的功能：

git checkout -b cart

8.1 配置 vuex

  1. 在项目根目录中创建 store 文件夹，专门用来存放 vuex 相关的模块

  2. 在 store 目录上鼠标右键，选择 新建 -> js文件，新建 store.js 文件：

在这里插入图片描述

  1. 在 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
  1. 在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：
// 1. 导入 store 的实例对象
import store from './store/store.js'

// 省略其它代码...

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

8.2 创建购物车的 store 模块

  1. 在 store 目录上鼠标右键，选择 新建 -> js文件，创建购物车的 store 模块，命名为 cart.js：

在这里插入图片描述

  1. 在 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: {},
}
  1. 在 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

8.3 在商品详情页中使用 Store 中的数据

  1. 在 goods_detail.vue 页面中，修改 <script></script> 标签中的代码如下：
// 从 vuex 中按需导出 mapState 辅助方法
import { mapState } from 'vuex'

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

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

  1. 在页面渲染时，可以直接使用映射过来的数据，例如：
<!-- 运费 -->
<view class="yf">快递：免运费 -- {{cart.length}}</view>

8.4 实现加入购物车的功能

  1. 在 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: {},
  }
  1. 在商品详情页面中，通过 mapMutations 这个辅助方法，把 vuex 中 m_cart 模块下的 addToCart 方法映射到当前页面：
// 按需导入 mapMutations 这个辅助方法
import { mapMutations } from 'vuex'

export default {
  methods: {
    // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用
    ...mapMutations('m_cart', ['addToCart']),
  },
}
  1. 为商品导航组件 uni-goods-nav 绑定 @buttonClick="buttonClick" 事件处理函数：
// 右侧按钮的点击事件处理函数
buttonClick(e) {
   // 1. 判断是否点击了 加入购物车 按钮
   if (e.content.text === '加入购物车') {

      // 2. 组织一个商品的信息对象
      const goods = {
         goods_id: this.goods_info.goods_id,       // 商品的Id
         goods_name: this.goods_info.goods_name,   // 商品的名称
         goods_price: this.goods_info.goods_price, // 商品的价格
         goods_count: 1,                           // 商品的数量
         goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片
         goods_state: true                         // 商品的勾选状态
      }

      // 3. 通过 this 调用映射过来的 addToCart 方法，把商品信息对象存储到购物车中
      this.addToCart(goods)

   }
}

8.5 动态统计购物车中商品的总数量

  1. 在 cart.js 模块中，在 getters 节点下定义一个 total 方法，用来统计购物车中商品的总数量：
// 模块的 getters 属性
getters: {
   // 统计购物车中商品的总数量
   total(state) {
      let c = 0
      // 循环统计商品的数量，累加到变量 c 中
      state.cart.forEach(goods => c += goods.goods_count)
      return c
   }
}
  1. 在商品详情页面的 script 标签中，按需导入 mapGetters 方法并进行使用：
// 按需导入 mapGetters 这个辅助方法
import { mapGetters } from 'vuex'

export default {
  computed: {
    // 把 m_cart 模块中名称为 total 的 getter 映射到当前页面中使用
    ...mapGetters('m_cart', ['total']),
  },
}
  1. 通过 watch 侦听器，监听计算属性 total 值的变化，从而动态为购物车按钮的徽标赋值：
export default {
  watch: {
    // 1. 监听 total 值的变化，通过第一个形参得到变化后的新值
    total(newVal) {
      // 2. 通过数组的 find() 方法，找到购物车按钮的配置对象
      const findResult = this.options.find((x) => x.text === '购物车')

      if (findResult) {
        // 3. 动态为购物车按钮的 info 属性赋值
        findResult.info = newVal
      }
    },
  },
}

8.6 持久化存储购物车中的商品

  1. 在 cart.js 模块中，声明一个叫做 saveToStorage 的 mutations 方法，此方法负责将购物车中的数据持久化存储到本地：
// 将购物车中的数据持久化存储到本地
saveToStorage(state) {
   uni.setStorageSync('cart', JSON.stringify(state.cart))
}
  1. 修改 mutations 节点中的 addToCart 方法，在处理完商品信息后，调用步骤 1 中定义的 saveToStorage 方法：
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++
   }

   // 通过 commit 方法，调用 m_cart 命名空间下的 saveToStorage 方法
   this.commit('m_cart/saveToStorage')
}
  1. 修改 cart.js 模块中的 state 函数，读取本地存储的购物车数据，对 cart 数组进行初始化：
// 模块的 state 数据
state: () => ({
   // 购物车的数组，用来存储购物车中每个商品的信息对象
   // 每个商品的信息对象，都包含如下 6 个属性：
   // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
   cart: JSON.parse(uni.getStorageSync('cart') || '[]')
}),

8.7 优化商品详情页的 total 侦听器

  1. 使用普通函数的形式定义的 watch 侦听器，在页面首次加载后不会被调用。因此导致了商品详情页在首次加载完毕之后，不会将商品的总数量显示到商品导航区域：
watch: {
   // 页面首次加载完毕后，不会调用这个侦听器
   total(newVal) {
      const findResult = this.options.find(x => x.text === '购物车')
      if (findResult) {
         findResult.info = newVal
      }
   }
}
  1. 为了防止这个上述问题，可以使用对象的形式来定义 watch 侦听器（详细文档请参考 Vue 官方的 watch 侦听器教程），示例代码如下：
watch: {
   // 定义 total 侦听器，指向一个配置对象
   total: {
      // handler 属性用来定义侦听器的 function 处理函数
      handler(newVal) {
         const findResult = this.options.find(x => x.text === '购物车')
         if (findResult) {
            findResult.info = newVal
         }
      },
      // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
      immediate: true
   }
}

8.8 动态为 tabBar 页面设置数字徽标

需求描述：从商品详情页面导航到购物车页面之后，需要为 tabBar 中的购物车动态设置数字徽标。

  1. 把 Store 中的 total 映射到 cart.vue 中使用：
// 按需导入 mapGetters 这个辅助方法
import { mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    // 将 m_cart 模块中的 total 映射为当前页面的计算属性
    ...mapGetters('m_cart', ['total']),
  },
}
  1. 在页面刚显示出来的时候，立即调用 setBadge 方法，为 tabBar 设置数字徽标：
onShow() {
   // 在页面刚展示的时候，设置数字徽标
   this.setBadge()
}
  1. 在 methods 节点中，声明 setBadge 方法如下，通过 uni.setTabBarBadge() 为 tabBar 设置数字徽标：
methods: {
   setBadge() {
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
         index: 2, // 索引
         text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
      })
   }
}

8.9 将设置 tabBar 徽标的代码抽离为 mixins

注意：除了要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购物车设置数字徽标。

此时可以使用 Vue 提供的 mixins 特性，提高代码的可维护性。

  1. 在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 tabbar-badge.js 文件，用来把设置 tabBar 徽标的代码封装为一个 mixin 文件：
import { mapGetters } from 'vuex'

// 导出一个 mixin 对象
export default {
  computed: {
    ...mapGetters('m_cart', ['total']),
  },
  onShow() {
    // 在页面刚展示的时候，设置数字徽标
    this.setBadge()
  },
  methods: {
    setBadge() {
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
        index: 2,
        text: this.total + '', // 注意：text 的值必须是字符串，不能是数字
      })
    },
  },
}
  1. 修改 home.vue，cate.vue，cart.vue，my.vue 这 4 个 tabBar 页面的源代码，分别导入 @/mixins/tabbar-badge.js 模块并进行使用：
// 导入自己封装的 mixin 模块
import badgeMix from '@/mixins/tabbar-badge.js'

export default {
  // 将 badgeMix 混入到当前的页面中进行使用
  mixins: [badgeMix],
  // 省略其它代码...
}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/150401.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ABP VNext 的日志机制 + SeriLog

ABP VNext 的日志机制 + SeriLog

** ABP VNext 的日志机制 ** 正用ABP VNext做个系统&#xff0c;由于框架默认带来日志处理机制&#xff0c;开发阶段基本能用&#xff0c;也一直没有去动它&#xff0c;快要上线了&#xff0c;思考了一下正式环境的日志管理流程&#xff0c;由于系统不大&#xff0c;预计访问…
阅读更多...
第一章.机器学习基本概念

第一章.机器学习基本概念

第一章.机器学习基本概念 1.1 第一章.机器学习基本概念 机器学习的本质就是&#xff1a;寻找一个函数。 1.不同种类的函数 1).Regression&#xff1a;The function outputs a scalar 说明:根据今天的PM2.5的一些参数来预测明天PM2.5值 2).Classification:Given option(classes…
阅读更多...
STL vector 模拟实现

STL vector 模拟实现

vector 概述 vector 的数据结构安排及操作方式&#xff0c;与原生数组十分相似&#xff0c;两者唯一的差别在于空间运用的灵活性。原生数组是静态空间&#xff0c;一旦配置了就不能改变大小&#xff1b;vector 是动态空间&#xff0c;可以在插入过程中动态调整空间大小。vecto…
阅读更多...
Pivoting跳板攻击

Pivoting跳板攻击

跳板攻击&#xff08;Pivoting&#xff09;是Meterpreter提供的一种攻击方法&#xff0c;允许从Meterpreter终端攻击网络中的其他系统。假如攻击者成功的入侵了一台主机&#xff0c;他就可以任意的利用这台机器作为跳板攻击网络中的其他系统&#xff0c;或者访问由于路由问题而…
阅读更多...
【ROS】tf2_geometry_msgs 出现 No module named ‘PyKDL‘

【ROS】tf2_geometry_msgs 出现 No module named ‘PyKDL‘

参考文章&#xff1a; PyCharm单独安装PyKDL 如何在基于python3的conda虚拟环境中从头编译PyKDL 1. 问题描述 import PyKDL ModuleNotFoundError: No module named PyKDL这是由于使用的环境中不存在 PyKDL 导致的&#xff0c;实际上 PyKDL 在装 ROS 的时候是一起装上了&#x…
阅读更多...
基于Springboot搭建java项目（十八）——Java线程池原理和运用

基于Springboot搭建java项目（十八）——Java线程池原理和运用

​ 在上一篇博客中有说到线程的基本原理和用法&#xff0c;其实Java中开辟出了一种管理线程的概念&#xff0c;这个概念叫做线程池&#xff0c;线程池的好处&#xff0c;就是可以方便的管理线程&#xff0c;也可以减少内存的消耗。那么&#xff0c;我们应该如何创建一个线程池&…
阅读更多...
JAVASE 基础知识点回顾

JAVASE 基础知识点回顾

1.关键字Static static 有三个特点&#xff0c;这边先阐述一下&#xff0c;后面代码也会展示 static 可以修饰方法(静态方法)、成员变量(静态变量)&#xff0c;修饰不了类请注意&#xff01;随着类的加载而加载&#xff0c;优先于对象存在&#xff0c;说人话就是不new 对象也…
阅读更多...
电机专用SVPWM算法实现

电机专用SVPWM算法实现

SH33F2811包含三相电机的空间矢量脉宽调制&#xff08;Space Vector Pulse Width Modulation&#xff0c;SVPWM&#xff09;算法&#xff0c;对应于交流感应电机或永磁同步电机中的三相电压源逆变器的功率器件的一种特殊的开关触发顺序和脉宽大小的组合。这种开关触发顺序和组合…
阅读更多...
k8s部署 wiki.js ,带中文分词

k8s部署 wiki.js ,带中文分词

官网 https://js.wiki/ https://docs.requarks.io/install/docker-desktop k8s postgres 安装 因为包含中文分词&#xff0c;要在原版的基础上增加分词插件。 这里直接使用别人已经 制作好的镜像 github 地址 : https://github.com/abcfy2/docker_zhparser 镜像地址&#x…
阅读更多...
【 java 集合】Map 接口常用方法总结

【 java 集合】Map 接口常用方法总结

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…
阅读更多...
【面试】70道Spring Boot面试题答案

【面试】70道Spring Boot面试题答案

文章目录PartAPartB更多请参考来源PartA 1 什么是springboot &#xff1f; 用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置&#xff08;properties或yml文件&#xff09; 创建独立的spring引用程序 main方法运行 嵌入的Tomcat 无需部署war文件 简化m…
阅读更多...
进程控制【Linux】

进程控制【Linux】

1.进程终止 1.1.进程退出场景 代码运行完毕&#xff0c;结果正确代码运行完毕&#xff0c;结果不正确代码异常终止 1.2.进程常见退出方法 常见的正常中止: 从main函数return返回调用exit_exit 查看进程退出码: echo $?(查看最近一次的进程退出码) 测试代码: include &l…
阅读更多...
【CDP】Cloudera Manager 记录一次 Service Monitor 内存溢出/使用率高的问题及解决方案

【CDP】Cloudera Manager 记录一次 Service Monitor 内存溢出/使用率高的问题及解决方案

一、问题描述 最近发现我们的生产环境 Service Monitor 的监控报表数据无法正常显示&#xff0c;有很多的断点&#xff0c;有很多数据没有被正常采集到&#xff0c;最后定位到是 service monitor 的JVM 内存使用率过高&#xff0c;导致频繁GC&#xff0c;使得 Service Monitor…
阅读更多...
Zynq PL DDR4读写测试工程

Zynq PL DDR4读写测试工程

基于XCZU21DR-2FFVD1156E开发&#xff0c;本文介绍对PL DDR4的读写操作&#xff0c;代码全部经过上板测试。 目录 添加DDR4 IP Basic Mode and Interface & Clocking Controller Options Advanced Clocking VIO IP配置 ILA IP配置 General Options Probe_Ports(0..7…
阅读更多...
爬虫的基本使用

爬虫的基本使用

文章目录urllib库1、基本使用2、一个类型、六个方法3、下载操作4、请求对象的定制5、get请求的quote方法6、get请求的urlencode方法7、post请求百度翻译8、post请求百度翻译之详细翻译小技巧&#xff1a;正则替换9、agax的get请求豆瓣电影第一页**10、agax的get请求豆瓣电影的前…
阅读更多...
使用容器跑一个zabbix 监控另外一个虚机的基础项

使用容器跑一个zabbix 监控另外一个虚机的基础项

目录 安装docker mysql数据库部署 拉取mysql镜像 运行mysql服务器 创建zabbix用户和数据库 进入docker容器登陆数据库 创建zabbix数据库创建zabbix用户 zabbix用户授权 复制mysql初始化数据库文件到容器 导入zabbix初始化数据 zabbix服务器部署 拉取镜像 运行容器 效果…
阅读更多...
Linux环境下，JAVA环境调用C++的动态链接库so

Linux环境下，JAVA环境调用C++的动态链接库so

1、使用QT开发一个动态链接库.so&#xff08;本次使用linux环境&#xff0c;在windows下是.dll&#xff09; 代码文件包含 testdll.cpp testdll.h testdll.pro testdll_global.h testdll.pro #------------------------------------------------- # # Project created by QtC…
阅读更多...
苹果手机怎么清理内存垃圾？2个方法，快速解决

苹果手机怎么清理内存垃圾？2个方法，快速解决

很多小伙伴在生活中会使用手机来看视频、聊天、学习等等。不管是苹果手机还是安卓手机&#xff0c;使用手机的时间长了&#xff0c;里面就会产生很多垃圾占据手机空间。苹果手机怎么清理内存垃圾&#xff1f;今天小编就来分享2个方法&#xff0c;教你快速解决。 一、删除不常用…
阅读更多...
ansible（第五天）

ansible（第五天）

五、实施任务控制 161 1.循环&#xff08;迭代&#xff09;--- loop --item 1.利用loop----item循环迭代任务 with_* 通过循环管理员不需要编写多个使用同一模块的任务。例&#xff1a;他们不需要编写五个任务来确保存在五个用 户&#xff0c;而是只需要编写一个任务来对含有…
阅读更多...
R语言应用xgboost进行机器学习（2）

R语言应用xgboost进行机器学习（2）

XGBoost 机器学习模型是一种高效且可扩的展的机器学习分类器&#xff0c;由 Chen 和 Guestrin 在 2016 年推广。XGBoost原理是是在决策树的基础上产生迭代&#xff0c;它以 boosting 的方式结合了多个决策树。通常创建每棵新树是为了通过梯度提升来减少先前模型的误差&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023