uni-app写的微信小程序每次更换另外账号登录时出现缓存上一个账号数据的问题？
- 清除缓存数据 ：在
onShow钩子中，我们将powerStations、list和responseRoles的值重置为初始状态，以清除之前的缓存数据。 - 重新获取数据 ：在
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>