电商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'])
}
结束。