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

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

  1. 清除缓存数据 :在 onShow 钩子中,我们将 powerStations、list 和 responseRoles 的值重置为初始状态,以清除之前的缓存数据。
  2. 重新获取数据 :在 onShow 钩子中调用 fetchData、fetchPowerStationData 和 tenantuSrank 函数,确保每次进入页面时都会重新获取最新的数据。
复制代码
   <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>
相关推荐
一渊之隔9 小时前
uniapp BLE 开发踩坑:小米手机数据接收截断问题排查全记录
智能手机·uni-app
Shaoshing9 小时前
缓存一致问题及常见解决方案
java·缓存
阿俊-全栈开发9 小时前
LikeShop 单商户标准版 UniApp 端二开:页面组件复用与自定义主题适配
uni-app·likeshop开源商城·likeshop单商户标准版·多商户源码
码士集团小青9 小时前
Redis 缓存击穿(失效)、缓存穿透、缓存雪崩怎么解决?
数据库·redis·缓存
码士集团小青9 小时前
硬核 | Redis 布隆(Bloom Filter)过滤器原理与实战
数据库·redis·缓存
一条泥憨鱼10 小时前
【Redis | 黑马点评】达人探店功能源码解读
数据库·redis·缓存
tianbin91111 小时前
批处理与微调辅助场景:Claude 中转并发、链路缓存与压测对比
java·开发语言·缓存
zhiboshequ13 小时前
Ai音视频对话在微信小程序端的技术实现方案
人工智能·微信小程序·live-pusher·live-player·音视频对话
小蒜学长13 小时前
基于过程性评价的ai助学平台(代码+数据库+LW)
java·spring boot·后端·微信小程序·过程性评价