uniapp 购物车页面解决实时刷新的问题

电商app购物车页面的刷新问题

onShow周期函数中实时渲染数据

在电商app中,购物车需要根据商品加入购物车/购物车商品删除/购物车商品下单等操作进行实时刷新数据。

最开始的处理方案就是:在购物车页面的onShow周期函数中添加加载数据的方法,只要一进入到购物车页面,就进行数据的刷新。

这样能够实现实时刷新,但是无论从哪个页面进入购物车页面,都会导致数据重新渲染,如果购物车中商品数量很多,则用户体验性非常之不好。

利用vuex中的mapGetters进行判断是否要刷新数据

具体实现方法如下:

store文件夹中添加cart.js文件

cart.js文件内容如下:

const state = {
	// 是否加载新的购物车列表
	updateCart:true,
	// 购物车商品数量,这个是其他地方用到的,因为都是购物车的数据,所以写在一起了
	cartCount:0
}
const getters = {
	getUpdateCart(state){
		return state.updateCart
	},
	getCartCount = {
		return state.cartCount	
	}
}
const mutations = {
	setUpdateCart(state,flag){
		console.log("改变了购物车的flag",Boolean(flag));
		state.updateCart = Boolean(flag);	
	},
	setCartCount(state,cartCount){
		state.cartCount = cartCount;
	}
}
const actions = {}
export default{
	namespaced:true,
	state,
	getters,
	mutations,
	actions
}

在store文件夹中的index.js中引入cart.js

import cart from "./cart.js"
const store = new Vuex.Store({
	……
	modules:{
		cart:cart
	}
})
export default store

在加购的地方使用

this.$store.commit('cart/setUpdateCart', true)

在购物车页面的onShow周期函数中判断是否要刷新

import { mapGetters } from 'vuex'
onShow(){
	if(!this.getUpdateCart) return false //如果this.getUpdateCart为false,则代表不刷新页面,return false即终止函数的执行。
}
computed:{
	...mapGetters('cart',['getUpdateCart'])
}

结束。

上一篇:决策树算法原理详解ID3、C4.5和CART


下一篇:机器学习day9-决策树