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

news/2024/12/4 6:28:59/

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

1,   清除缓存数据:在 onShow 钩子中,我们将 powerStationslist 和 responseRoles 的值重置为初始状态,以清除之前的缓存数据。

2,重新获取数据:在 onShow 钩子中调用 fetchDatafetchPowerStationData 和 tenantuSrank 函数,确保每次进入页面时都会重新获取最新的数据。

  1. <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.rolesconst 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>
    


http://www.ppmy.cn/news/1552201.html

相关文章

Linux C/C++编程之静态库

【图书推荐】《Linux C与C一线开发实践&#xff08;第2版&#xff09;》_linux c与c一线开发实践pdf-CSDN博客《Linux C与C一线开发实践&#xff08;第2版&#xff09;&#xff08;Linux技术丛书&#xff09;》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com…

肝硬化腹水中医怎么治疗

肝硬化腹水在中医中被称为“鼓胀”或“水鼓”&#xff0c;其治疗强调整体观念和辨证施治。以下是中医治疗肝硬化腹水的主要方法和原则&#xff1a; ### 1. 治疗原则 - **扶正祛邪**&#xff1a;中医认为肝硬化腹水的主要病机是正虚邪实&#xff0c;治疗上以扶正为主&#xff…

【大模型微调】pdf转markdown

目前市面上大部分都是pdf文档,要想转换成能训练的文本,调研了各种工具。 觉得MinerU确实不错。 参考此链接进行操作 MinerU/docs/README_Ubuntu_CUDA_Acceleration_en_US.md at master opendatalab/MinerU GitHub 需要注意的几个点: 1. 使用root账户安装的,配置文件在…

微信小程序分包流程

小程序目录结构 - app.js - app.json - app.wxss - pages // 主包所有页面- index // 页面内容,包含(index.js,index.wxml,index.json,index.wxss)- logs - packageA // 第一个分包- pages // 第一个分包的所有页面- index // 页面内容,包含(index.js,index.wxml,index.json…

南昌榉之乡托养机构解读:自闭症与看电视并无必然联系

在探讨自闭症的成因时&#xff0c;有人会问&#xff1a;自闭症是多看电视引起的吗&#xff1f;今天&#xff0c;就让我们来看看南昌榉之乡托养机构对此有何见解。 榉之乡大龄自闭症托养机构在江苏、广东、江西等地都有分校&#xff0c;一直致力于为大龄自闭症患者提供专业的支持…

Kylin Server V10 下 Kafka 集群部署

一、ZooKeeper 集群部署 1、主机规划 主机名 IP 地址 myid 10.8.3.35 1 10.8.3.36 2 10.8.3.37 3 2、拓扑结构 3、部署 (1) 下载Zookeeper [root@localhost ~]# cd /usr/local [root@localhost local]# wget https://www.apache.org/dyn/closer.lua/zookeeper/zookeeper-…

【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit(6)

1.问题描述&#xff1a; 推送通知到手机&#xff0c;怎么配置拉起应用指定的页面&#xff1f; 解决方案&#xff1a; 1、如果点击通知栏打开默认Ability的话&#xff0c; actionType可以设置为0&#xff0c; 同时可以在.clickAction.data中&#xff0c;指定待跳转的page页面…

React Native学习笔记(三)

一 组件简介 1.1 简介 RN中的核心组件&#xff0c;是对原生组件的封装 原生组件&#xff1a;Android或ios内的组件核心组件&#xff1a;RN中常用的&#xff0c;来自react-native的组件 原生组件 在 Android 开发中是使用 Kotlin 或 Java 来编写视图&#xff1b;在 iOS 开发…