(8).优化商品详情页的监听器
- 使用普通函数的形式定义的
watch侦听器，在页面首次加载后不会被调用。因此导致了商品详情页在首次加载完毕之后，不会将商品的总数量显示到商品导航区域：
handler是源码的方法不能变，
watch: { total: { handler(newValue) { // 这个方法是: 在一个未知的数组对象中找哪一个对象的text属性为"购物车"的这个对象。 const findResult = this.options.find(item => item.text === '购物车') if (findResult) { // 加入说找到了就赋值新的值 findResult.info = newValue } }, immediate: true // 立即执行 } },
(9).动态为 tabBar 页面设置数字徽标
需求描述：从商品详情页面导航到购物车页面之后，需要为 tabBar 中的购物车动态设置数字徽标。
cate.vue
<template> <view> <h1>购物车</h1> </view> </template> <script> // 引入 ⭐ import { mapGetters } from 'vuex' export default { onShow() { this.setBadge() }, // 声明⭐⭐ computed: { ...mapGetters('m_cart', ['total']) }, data() { return { }; }, methods: { setBadge() { uni.setTabBarBadge({⭐⭐ // 0索引是 : 首页 1索引是分类 2索引是购物车 3索引是我的 index: 2, text: this.total + '' // 这里必须是字符串 }) } } } </script> <style lang="scss"> </style>
(10).将设置 tabBar 徽标的代码抽离为 mixins
注意：除了要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购物车设置数字徽标。
此时可以使用 Vue 提供的 mixins 特性，提高代码的可维护性。
实际上就是说: 代码的封装
tabbar-badge.js
// 引入 ⭐ import { mapGetters } from "vuex" // 抛出 ⭐⭐ export default { onShow() { this.setBadge() }, // 声明 computed: { ...mapGetters('m_cart', ['total']) }, methods: { setBadge() { uni.setTabBarBadge({ // 0索引是 : 首页 1索引是分类 2索引是购物车 3索引是我的 index: 2, text: this.total + '' }) } } }
my.vue
<template> <view> <h1>个人中心 </h1> </view> </template> <script> import badgeMix from '@/mixins/tabbar-badge.js' // 引入⭐ export default { mixins: [badgeMix], //使用⭐⭐ data() { return { }; } } </script> <style lang="scss"> </style>
8.Vuex 数据共享步骤 ⭐
将cart.js的方法共享的五个基本步骤 1.创建vuex 共享出vuex ------->(store.js) 2.引入(store.js)并挂载出去 ----->(main.js) 3.创建要共享内容的js ------->(cart.js) 4.在store.js引入刚才创建的共享js并挂载出去 ------>(store.js) 5.使用共享的数据
(1).创建store.js并共享
store.js
// 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: {}, })
(2).挂载到主入口文件上
main.js
// #ifndef VUE3 import Vue from 'vue' import App from './App' // 创建store import store from "@/store/store.js" ⭐ 引入 @/代表根目录 Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App, store ⭐⭐ 挂载 }) app.$mount() // #endif // #ifdef VUE3 import { createSSRApp } from 'vue' import App from './App.vue' export function createApp() { const app = createSSRApp(App) return { app } }
(3).创建共享的数据.js
cart.js
只有共享数据.js才能修改要共享的数据
export default { // 1.开启命名空间 ⭐ namespaced: true, // 返回数据⭐⭐ state: () => ({ // 购物车的数组，用来存储购物车中每个商品的信息对象 // 每个商品的信息对象，都包含如下 6 个属性： // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state } cart: [] }), // 返回增删改的操作 ⭐⭐⭐ mutations: { addToCart(state, item) { // 第一个参数:返回值的名(调用cart的)、第二个参数: 对象 // findReusult : 要么得到undefind->没有找到信息(false) 要么得到商品的对象(true) const findReusult = state.cart.find(x => x.goods_id === item.goods_id) //这里会遍历catr数组，并得到对象x。然后进行判断购物车里存放的和添加的是否一致 if (!findReusult) { // 加入说undefind state.cart.push(item) // 推入cart数组 } else { //加入说已经存在 那么就自增1 findReusult.goods_count++ } } }, // 用于读的操作 getters: { total(state) { let c = 0 state.cart.forEach(item => c += item.goods_count) return c } } }
(4).引入要共享的数据.js
store.js
// 1. 导入 Vue 和 Vuex import Vue from 'vue' import Vuex from 'vuex' import moduleCart from '@/store/cart.js' ⭐ // 2. 将 Vuex 安装为 Vue 的插件 Vue.use(Vuex) // 3. 创建 Store 的实例对象 const store = new Vuex.Store({ // TODO：挂载 store 模块 modules: { 'm_cart': moduleCart ⭐⭐ }, }) // 4. 向外共享 Store 的实例对象 export default store
(5).引入/使用共享的数据
1.共享属性
// 从 vuex 中按需导出 mapState 辅助方法 import { mapState } from 'vuex' ⭐ export default { computed: { // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用 // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2']) ...mapState('m_cart', ['cart']), ⭐ }, // 省略其它代码... }
2.共享方法
// 引入Vuex import { // 映射属性 mapState, // 映射方法 mapMutations } from "vuex" methods: { // store.js声明的模块名 共享的方法名 ...mapMutations('m_cart', ['addToCart']), }
3.使用
属性的话当作 data区域中的数据一样 方法的话当作 methods方法区中的方法一样 eg:调用共享方法 this.addToCart()
