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>
相关推荐
Brave & Real3 小时前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序
2301_780789665 小时前
高防cdn如何缓存网页静态资源
java·spring·web安全·缓存·kubernetes·ddos
Will_Ye7 小时前
Ubuntu中pip 缓存和conda的缓存路径修改
缓存·conda·pip
草木红7 小时前
Redis 语法基础入门
数据库·redis·缓存
霸道流氓气质8 小时前
Caffeine 本地缓存详解与实战指南
缓存
颂love10 小时前
Redis 核心知识点汇总:安装配置 + 9 大数据结构命令与场景
数据库·redis·缓存
剑傲娇11 小时前
【计算机组成原理】 C与汇编的「对话」
服务器·开发语言·缓存
边界条件╝11 小时前
uniapp 深度使用
uni-app
Trouvaille ~12 小时前
【Redis篇】Hash 哈希:字段级操作与对象存储的最佳实践
数据库·redis·后端·算法·缓存·哈希算法·键值对