uni-app写的微信小程序每次换账号登录时出现缓存上一个账号数据的问题

uni-app写的微信小程序每次更换另外账号登录时出现缓存上一个账号数据的问题?

  1. 清除缓存数据 :在 onShow 钩子中,我们将 powerStationslistresponseRoles 的值重置为初始状态,以清除之前的缓存数据。
  2. 重新获取数据 :在 onShow 钩子中调用 fetchDatafetchPowerStationDatatenantuSrank 函数,确保每次进入页面时都会重新获取最新的数据。
复制代码
   <template>
   	<view class="stati_q">
   		<view class="stati_a">
   			<view class="stati_z">
   				<view v-if="responseRoles.includes('sitemanage')" class="stati_nhy">
   					<view class="stati_nqw" :class="{ 'highlight': selectedTab === '用电统计' }"
   						@click="selectedTab = '用电统计'">
   						用电统计
   					</view>
   					<view class="stati_nqw" :class="{ 'highlight': selectedTab === '光伏发电统计' }"
   						@click="selectedTab = '光伏发电统计'">
   						光伏发电统计
   					</view>

   				</view>
   				<view v-if="responseRoles.includes('electricCollection')" class="stati_nhy">
   					<view class="stati_nqw" :class="{ 'highlight': selectedTab === '用电统计' }"
   						@click="selectedTab = '用电统计'">
   						用电统计
   					</view>
   				</view>
   				<view v-if="responseRoles.includes('operation')" class="stati_nhy">
   					<view class="stati_nqw" :class="{ 'highlight': selectedTab === '用电统计' }"
   						@click="selectedTab = '用电统计'">
   						用电统计
   					</view>
   					<view class="stati_nqw" :class="{ 'highlight': selectedTab === '光伏发电统计' }"
   						@click="selectedTab = '光伏发电统计'">
   						光伏发电统计
   					</view>
   				</view>
   				<view class="stati_w" v-if="selectedTab === '用电统计'">
   					<Yongdian></Yongdian>
   				</view>
   				<view class="stati_w" v-else-if="selectedTab === '光伏发电统计'">
   					<Fadian></Fadian>
   				</view>
   			</view>
   		</view>
   		<view class="stati_d">
   			<view class="stati_c">
   				<view class="stati_r">当日用电及碳排放排名</view>
   				<view class="stati_f" v-if="responseRoles.includes('sitemanage')">
   					<view v-for="item in sortedPowerStations" :key="item.siteName" class="stati_v">
   						<view class="stati_t">
   							<img :src="'http://47.104.232.49/dev-api' + item.siteImgUrl" alt="" class="stati_g" />
   							<view>{{ item.siteName }}</view>
   						</view>
   						<view class="stati_li">
   							<text>{{ item.usePowerCount }}</text> kwh
   						</view>
   						<view class="stati_li">
   							<text>{{ item.carbonEmission }}</text> 吨
   						</view>
   					</view>
   				</view>
   				<view class="stati_f" v-if="responseRoles.includes('operation')">
   					<view v-for="item in sortedPowerStations" :key="item.siteName" class="stati_v">
   					
   						<view class="stati_li">
   							<text>{{ item.usePowerCount }}</text> kwh
   						</view>
   						<view class="stati_li">
   							<text>{{ item.carbonEmission }}</text> 吨
   						</view>
   					</view>
   				</view>

   				<view class="stati_f" v-if="responseRoles.includes('electricCollection')">
   					<view v-for="item in list" :key="item.deviceName" class="stati_v">
   						<view class="stati_t">
   							<view class="stati_g"></view>
   							<view>{{ item.deviceName }}</view>
   						</view>
   						<view class="stati_li">
   							<text>{{ item.usePowerCount }}</text> kwh
   						</view>
   						<view class="stati_li">
   							<text>{{ item.carbonEmission }}</text> 吨
   						</view>
   					</view>
   				</view>
   			</view>
   		</view>
   	</view>
   </template>
   <script setup lang="ts">
   	import { ref, computed, onMounted } from 'vue';
   	import { onShow } from '@dcloudio/uni-app';
   	import Yongdian from '../yongdian/yongdian.vue';
   	import Fadian from '../fadian/fadian.vue';
   	import { appgetInfo, siteusepowercountrank, tenantusrank } from '@/src/api/api.js';

   	const selectedTab = ref('用电统计');
   	const powerStations = ref([]);
   	const list = ref([]);
   	const responseRoles = ref<string[]>([]); // 新增变量用于存储response.roles
   	const sortedPowerStations = computed(() => {
   		return powerStations.value.slice().sort((a, b) => b.usePowerCount - a.usePowerCount);
   	});

   	// 获取电站排名数据
   	const fetchPowerStationData = async () => {
   		try {
   			const response = await siteusepowercountrank();
   			powerStations.value = response.data;
   		} catch (error) {
   			console.error(error);
   		}
   	};
   	const tenantuSrank = async () => {
   		try {
   			const response = await tenantusrank();
   			list.value = response.data;
   		} catch (error) {
   			console.error(error);
   		}
   	};

   	const fetchData = () => {
   		appgetInfo().then(response => {
   			responseRoles.value = response.roles;
   		}).catch(error => {
   			console.error("获取工单失败", error);
   		});
   	};

   	onMounted(() => {
   		fetchData();
   		fetchPowerStationData();
   		tenantuSrank();
   	});

   	onShow(() => {
   		// 清除缓存数据
   		powerStations.value = [];
   		list.value = [];
   		responseRoles.value = [];

   		// 重新获取数据
   		fetchData();
   		fetchPowerStationData();
   		tenantuSrank();
   	});
   </script>
相关推荐
脾气有点小暴11 小时前
scroll-view分页加载
前端·javascript·uni-app
Psycho_MrZhang13 小时前
Redis 设计思想总结
数据库·redis·缓存
脾气有点小暴14 小时前
uniapp自定义头部导航
前端·uni-app
张彦峰ZYF16 小时前
高并发场景下的缓存雪崩探析与应对策略
redis·分布式·缓存
全栈工程师修炼指南19 小时前
Nginx | HTTP 反向代理:对上游服务端响应缓存流程浅析与配置实践
运维·网络协议·nginx·http·缓存
前端 贾公子19 小时前
[uniapp][swtich开关]阻止切换状态(类似阻止事件冒泡)
uni-app
张彦峰ZYF21 小时前
高并发场景下的大 Key 问题及应对策略
redis·分布式·缓存
张彦峰ZYF21 小时前
高并发场景下的缓存击穿问题探析与应对策略
redis·分布式·缓存
qq_12498707531 天前
基于微信小程序的校园跑腿系统的设计与实现(源码+论文+部署+安装)
spring boot·微信小程序·小程序·毕业设计·计算机毕业设计
Li_7695321 天前
Redis进阶(二)—— Redis 事务
数据库·redis·缓存