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

逃离我推掉我的手 2021-07-25 12:50 1741阅读 0赞

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

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

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

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

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

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

具体实现方法如下：

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

cart.js文件内容如下：

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

#### 购物车页面数据加载函数执行时，将是否需要刷新改为false ####

loadData(){ 
    	.....
    	this.$store.commit('cart/setUpdateCart', false)
    }

#### 购物车页面销毁之前，将是否需要刷新改为true ####

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

结束。