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>
相关推荐
惊讶的猫2 小时前
redis分片集群
数据库·redis·缓存·分片集群·海量数据存储·高并发写
jiunian_cn3 小时前
【Redis】渐进式遍历
数据库·redis·缓存
jiunian_cn4 小时前
【Redis】数据库管理操作
数据库·redis·缓存
難釋懷5 小时前
秒杀优化-基于阻塞队列实现秒杀优化
redis·缓存
清水白石0086 小时前
深入解析 LRU 缓存:从 `@lru_cache` 到手动实现的完整指南
java·python·spring·缓存
程序媛徐师姐6 小时前
Java基于微信小程序的模拟考试系统,附源码+文档说明
java·微信小程序·java模拟考试系统小程序·模拟考试微信小程序·模拟考试系统小程序·模拟考试小程序·java模拟考试小程序
大尚来也6 小时前
微信小程序开发费用全解析:从SaaS到定制的多元选择
微信小程序
无尽的沉默6 小时前
Redis下载安装
数据库·redis·缓存
奔跑的web.6 小时前
UniApp 路由导航守
前端·javascript·uni-app
yuanmenghao7 小时前
Linux 性能实战 | 第 10 篇 CPU 缓存与内存访问延迟
linux·服务器·缓存·性能优化·自动驾驶·unix