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映射到当前页面
// 按需导入 mapMutations 这个辅助方法import { mapMutations } from 'vuex'export default {methods: {// 把 m_cart 模块中的 addToCart 方法映射到当前页面使用...mapMutations('m_cart', ['addToCart']),},}
在store中使用调用中的方法
// 通过 commit 方法 ， 调用 m_cart 命名空间下的 saveToStorage 方法this.commit('m_cart/saveToStorage')
为设置数字徽标
先把映射一下
再把使用方法更新下标为2 ， 即第3个的上徽标
// 按需导入 mapGetters 这个辅助方法import { mapGetters } from 'vuex'export default {data() {return {}},computed: {// 将 m_cart 模块中的 total 映射为当前页面的计算属性...mapGetters('m_cart', ['total']),},}
methods: {setBadge() {// 调用 uni.setTabBarBadge() 方法 ， 为购物车设置右上角的徽标uni.setTabBarBadge({index: 2, // 索引text: this.total + '' // 注意：text 的值必须是字符串 ， 不能是数字})}}
然后在挂载的时候和更新数量的时候用一下就行
因为很多页面都要用 ， 所以这里可以使用混入 ， 在根目标下新建一个文件夹 ， 然后把代码封装到一个单独的js文件 ， 在四个页面中导入即可
也可再加一个监听属性 ， 可以全局改变的值
watch: {// 监听 total 值的变化total() {// 调用 methods 中的 setBadge 方法 ， 重新为 tabBar 的数字徽章赋值this.setBadge()},},
// 导入自己封装的 mixin 模块import badgeMix from '@/mixins/tabbar-badge.js'export default {// 将 badgeMix 混入到当前的页面中进行使用mixins: [badgeMix],// 省略其它代码...}
动态更新勾选的商品数量
商品数量 = 每一项已勾选的商品所选数量相加
【uniapp黑马项目总结】这里使用了方法
// 勾选的商品的总数量checkedCount(state) {// 先使用 filter 方法 ， 从购物车中过滤器已勾选的商品// 再使用 reduce 方法 ， 将已勾选的商品总数量进行累加// reduce() 的返回值就是已勾选的商品的总数量return state.cart.filter(x => x.goods_state).reduce((total, item) => total += item.goods_count, 0)}
购物车项左滑删除UI效果

用ui-swipe-组件 ， 这里的item项 ， 用:right-来设置 ， 之前是属性
options: [{text: '删除', // 显示的文本内容style: {backgroundColor: '#C00000' // 按钮的背景颜色}}]