网站建设包括哪些方面的费用,企业网站推广方案范例,英雄联盟世界排名,做动态的网站提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 前言8.0 创建 cart 分支8.1 配置 vuex8.2 创建购物车的 store 模块8.3 在商品详情页中使用 Store 中的数据8.4 实现加入购物车的功能8.5 动态统计购物车中商品的总数… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 前言8.0 创建 cart 分支8.1 配置 vuex8.2 创建购物车的 store 模块8.3 在商品详情页中使用 Store 中的数据8.4 实现加入购物车的功能8.5 动态统计购物车中商品的总数量8.6 持久化存储购物车中的商品8.7 优化商品详情页的 total 侦听器8.8 动态为 tabBar 页面设置数字徽标8.9 将设置 tabBar 徽标的代码抽离为 mixins 前言
8.0 创建 cart 分支
git checkout -b cart8.1 配置 vuex
在项目根目录中创建 store 文件夹专门用来存放 vuex 相关的模块在 store 目录上鼠标右键选择 新建 - js文件新建 store.js 文件在 store.js 中按照如下 4 个步骤初始化 Store 的实例对象
// 1. 导入 Vue 和 Vuex
import Vue from vue
import Vuex from vuex
//引入cart模块
import moduleCart from ./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在 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 模块
在 store 目录上鼠标右键选择 新建 - js文件创建购物车的 store 模块命名为 cart.js在 cart.js 中初始化如下的 vuex 模块
export default{
//为当前模块开启命名空间namespaced:true,//模块的state数据state:()({//购物车的数据用来存储购物车中每个商品的信息// {goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state}cart:[] }),mutations:{},getters:{},
}在 store/store.js 模块中导入并挂载购物车的 vuex 模块
// 1. 导入购物车的 vuex 模块
import moduleCart from ./cart.js
const store new Vuex.Store({// TODO挂载 store 模块modules: {// 2. 挂载购物车的 vuex 模块模块内成员的访问路径被调整为 m_cart例如// 购物车模块中 cart 数组的访问路径是 m_cart/cartm_cart: moduleCart,},
})8.3 在商品详情页中使用 Store 中的数据
在 goods_detail.vue 页面中修改 标签中的代码
// 从 vuex 中按需导出 mapState 辅助方法
scriptimport { mapState } from vuexexport default{computed:{// 调用 mapState 方法都需要指定模块的名称,把 m_cart 模块中的 cart 数组映射到当前页面中作为计算属性来使用// ...mapState(模块的名称, [要映射的数据名称1, 要映射的数据名称2])...mapState(m_cart,[cart])} }
/script在页面渲染时可以直接使用映射过来的数据
!-- 运费 --view classyf快递免运费 -- {{cart.length}}/view8.4 实现加入购物车的功能
在 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) {// 如果购物车中没有这件商品则直接 pushstate.cart.push(goods)} else {// 如果购物车中有这件商品则只更新数量即可findResult.goods_count}},},// 模块的 getters 属性getters: {},
}在商品详情页面中通过 mapMutations 这个辅助方法把 vuex 中 m_cart 模块下的 addToCart 方法映射到当前页面
// 按需导入 mapMutations 这个辅助方法
import { mapMutations } from vuexexport default {methods: {// 把 m_cart 模块中的 addToCart 方法映射到当前页面使用...mapMutations(m_cart, [addToCart]),},
}为商品导航组件 uni-goods-nav 绑定 buttonClick“buttonClick” 事件处理函数
// 右侧按钮的点击事件处理函数
buttonClick(e) {// 1. 判断是否点击了 加入购物车 按钮if (e.content.text 加入购物车) {// 2. 组织一个商品的信息对象const goods {goods_id: this.goods_info.goods_id, // 商品的Idgoods_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 动态统计购物车中商品的总数量
在 cart.js 模块中在 getters 节点下定义一个 total 方法用来统计购物车中商品的总数量
// 模块的 getters 属性 多用来统计一些数据getters:{// 统计购物车中商品的总数量total(state){let c 0state.cart.forEach(goods c goods.goods_count)return c}},在商品详情页面的 script 标签中按需导入 mapGetters 方法并进行使用
// 按需导入 mapGetters 这个辅助方法
import { mapGetters } from vuexexport default {computed: {// 把 m_cart 模块中名称为 total 的 getter 映射到当前页面中使用...mapGetters(m_cart, [total]),},
}通过 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 持久化存储购物车中的商品
在 cart.js 模块中声明一个叫做 saveToStorage 的 mutations 方法此方法负责将购物车中的数据持久化存储到本地
// 将购物车中的数据持久化存储到本地
saveToStorage(state) {uni.setStorageSync(cart, JSON.stringify(state.cart))
}修改 mutations 节点中的 addToCart 方法在处理完商品信息后调用步骤 1 中定义的 saveToStorage 方法
addToCart(state, goods) {// 根据提交的商品的Id查询购物车中是否存在这件商品// 如果不存在则 findResult 为 undefined否则为查找到的商品信息对象const findResult state.cart.find(x x.goods_id goods.goods_id)if (!findResult) {// 如果购物车中没有这件商品则直接 pushstate.cart.push(goods)} else {// 如果购物车中有这件商品则只更新数量即可findResult.goods_count}// 通过 commit 方法调用 m_cart 命名空间下的 saveToStorage 方法this.commit(m_cart/saveToStorage)
}修改 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 侦听器
使用普通函数的形式定义的 watch 侦听器在页面首次加载后不会被调用。因此导致了商品详情页在首次加载完毕之后不会将商品的总数量显示到商品导航区域为了防止这个上述问题可以使用对象的形式来定义 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 页面设置数字徽标
把 Store 中的 total 映射到 cart.vue 中使用
// 按需导入 mapGetters 这个辅助方法
import {mapGetters} from vuex
computed: {// 将 m_cart 模块中的 total 映射为当前页面的计算属性...mapGetters(m_cart,[total]) },在页面刚显示出来的时候立即调用 setBadge 方法为 tabBar 设置数字徽标
onShow(){// 在页面刚展示的时候设置数字徽标this.setBadge()},
setBadge(){// 调用 uni.setTabBarBadge() 方法为购物车设置右上角的徽标uni.setTabBarBadge({index:2,//索引// 注意text 的值必须是字符串不能是数字text:this.total})}在 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 页面中为购物车设置数字徽标在项目根目录中新建 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 的值必须是字符串不能是数字})},},
}修改 home.vuecate.vuecart.vuemy.vue 这 4 个 tabBar 页面的源代码分别导入 /mixins/tabbar-badge.js 模块并进行使用
// 导入自己封装的 mixin 模块
import badgeMix from /mixins/tabbar-badge.jsexport default {// 将 badgeMix 混入到当前的页面中进行使用mixins: [badgeMix],// 省略其它代码...
}
