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>
相关推荐
程序员阿鹏6 小时前
为什么MySQL InnoDB选择B+树?
数据结构·数据库·b树·sql·mysql·算法·缓存
阿祖zu7 小时前
训练师 Agent 小程序产品上线啦
微信小程序·llm·agent
2601_9623010112 小时前
缓存知识点总结
缓存·知识点·总结·后端开发·面试复习
bug总结15 小时前
uniapp的easycom自动组件注册机制
uni-app
HF_code16 小时前
uniapp-history路由深度指南
uni-app
莫得感情 o16 小时前
Redis 10 · 集群:16384槽、扩缩容与请求路由
redis·缓存
泡海椒16 小时前
JQuick-java (JQuick-ASM)性能优化原理:字节码生成与缓存机制深度解析
java·缓存·性能优化
莫得感情 o17 小时前
Redis 11 · 缓存问题:穿透、击穿与雪崩
redis·缓存
kiss strong17 小时前
redis服务器登录(内网环境,无法使用客户端)
数据库·redis·缓存
suliqiang18 小时前
【前端技术】 Web 前端技术36年 演进全景图
信息可视化·微信小程序·小程序·前端框架·uni-app·人机交互·xcode