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'])
}

结束。