因为购物车里面的数据在多个页面中都会用到，此时就需要把购物车的数据存在VUEX里面
配置Vuex

1.在项目根目录中创建store文件夹，专门用来存放vuex相关的模块
2.在store目录上鼠标右键，选择新建->js文件，新建store.js文件：
3.在store.js中按照如下4个步骤初始化Store的实例对象

在这里插入图片描述

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

在这里插入图片描述

实操

在这里插入图片描述

初始化Store的实例对象

在这里插入图片描述

在这里插入图片描述

创建购物车的store模块

用来存储和购物车相关的数据
1.在store目录上鼠标右键，选择新建->js文件，创建购物车的store模块，命名为cart.js
2.在cart.js中，初始化如下的vuex模块

在这里插入图片描述

3.在store/store.js模块中，导入并挂载购物车的vuex模块，示例代码如下

在这里插入图片描述

实操

在这里插入图片描述

向外部暴露4个对象：namespaced、state、mutations、getters

在这里插入图片描述

在store.js里面导入这个模块

在这里插入图片描述

后面我们在访问购物车模块的数据,包括mutations,getters
需要使用m_cart这个路径进行访问

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

在这里插入图片描述

这个就说明了我们项目里面的vuex就成功的配置好了，是可以正常使用的

在这里插入图片描述

点击加入购物车按钮，将商品的信息对象存储到购物车数组里面

在这里插入图片描述
在这里插入图片描述

实现加入购物车的功能
在这里插入图片描述

点击这两个按钮，分别打印出这些

在这里插入图片描述
在这里插入图片描述

console.log(findResult)是undefined，说明刚开始里面没有这个商品
console.log(state.cart)打印出商品的信息对象
再次点击相同商品的时候，findResult就不会打印出undefined，而是第一个添加的商品信息
console.log(state.cart)打印出的商品的信息对象的个数会加1

动态统计购物车的总数量，并将透传给购物车的角标

脚本的数据是data里面的info显示的
我们需要定义一个计算属性，动态统计商品的总数量

1.在cart.js模块中，在getters节点下定义一个total方法，用来统计购物车中商品的总数量
2.在商品详情页面的script标签中，按需导入mapGetters方法并进行使用
3.通过watch侦听器，监听计算属性total值的变化，从而动态为购物车按钮的徽标赋值

在这里插入图片描述

在这里插入图片描述

有一点疑惑，为啥新值，能被形参newVal监听到？
在 Vue.js 中，对于 watch 监听的表达式，在其值发生变化时，会立即调用回调函数并传入新值和旧值两个参数，这是 Vue.js 的内置机制。在上述代码中，当 total 值发生变化时，watch 会自动调用回调函数，并将新值作为第一个参数（newVal）传入。
在这里，total 是一个 getter 函数，在 store 中定义了一个名为 total 的 getter，用来计算购物车中所有商品数量的总和。当购物车中商品数量发生变化时，total getter 返回的数据也会发生变化，从而触发 watch 监听函数中的回调函数。因此，通过监听 total 可以实现根据购物车商品数量的变化来更新 UI 页面的需求。

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

现在一编译的时候，购物车的商品就没有。因为现在商品的信息是存在内存里面的
可以使用小程序持久化存储的api
1.在cart.js模块中，声明一个叫做saveToStorage的mutations方法，此方法负责将购物车中的数据持久化存储到本地：
2.修改mutations节点中的addToCart方法，在处理完商品信息后，调用步骤1中定义的saveToStorage方法
3.修改cart.js模块中的state函数，读取本地存储的购物车数据，对cart数组进行初始化

在这里插入图片描述

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

项目编译之后，购物车的信息不显示
1.使用普通函数的形式定义的wtch侦听器，在页面首次加载后不会被调用。因此导致了商品详情页在首次加载完毕之后，不会将商品的总数量显示到商品导航区域
2.为了防止上述问题，可以使用对像的形试来定义watch侦听器（详细文档请参考Vue官方的watch侦听器心教程），示例代码如下

在这里插入图片描述

在这里插入图片描述

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

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

在这里插入图片描述

1.把Store中的total映射到cart.vue中用
2.在页面刚显示出来的时候，立即调用setBadge方法，为tabBar设置数字徽标
3.在methods节点中，声明setBadge方法如下，通过uni.setTabBarBadge()为tabBar设置数字徽标

在这里插入图片描述

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

注意：除了要在cart.vue页面中设置购物车的数字徽标，还需要在其它3个tabBar页面中，为购物车设置数字徽标。
此时可以使用Vue提供的mixins特性，提高代码的可维护性。

在这里插入图片描述

1.在项目根目录中新建mixins文件夹，并在mixins文件夹之下新建tabbar-badge.js文件，用来把设置tabBar徽标的代码封装为一个mixin文件
2.修改home.vue,cate.vue,cart.vue,my.vue这4个tabBar页面的源代码，分别导入@/mixins/tabbar-badge.js模块并进行使用

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

# uni-app # javascript # vue.js
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟