uni-app 利用localStorage进行页面间数据传递

最新推荐文章于 2024-05-04 03:21:15 发布

惠惠子~

最新推荐文章于 2024-05-04 03:21:15 发布

阅读量965

点赞数

文章标签： uni-app vue

本文链接：https://blog.csdn.net/Gao_Chuanhui/article/details/115110810

版权

本文介绍如何在uni-app中使用localStorage进行页面间数据传递，确保当一个页面的数据修改时，所有相关页面能实时同步更新。通过保存数据副本到缓存并在修改后覆盖原有数据，实现了列表页和详情页的无缝同步。

摘要由CSDN通过智能技术生成

需求：两个页面，第一个页面是数据的列表，有几项数据可以进行修改，第二个页面某个列表数据的详情页，相应的几项数据也可以进行修改，要求不管是那个页面的哪个数据进行修改，两个页面都要同步变化

关键点：对数据修改后，一定要覆盖原来的数组或者对象------页面数据同步变化
得到的数据，页面显示一份，保存在缓存中一份-----页面间数据的传递和同步

效果：
在这里插入图片描述

页面部分就省略了，布局比较简单，主要是逻辑部分
列表页逻辑：

export default{
   
  data(){
   
  return{
   
     detailList:[],     //保存后台得到的列表数组
     
     }
  },
  onReady() {
   
		this.detailList = uni.getStorageSync('pp-detailList')  //从详情页返回，重新加载列表
	},
  methods:{
   
  //该页面的一顿数据操作，具体看需求
    cal(e){
   
     if (e >= 0) {
   
		if (this.keyData.type == 'price') {
   
			this.detailList[this.keyData.index].price = Number(e);
			this.detailList[this.keyData.index].taxPrice = (Number(e) * (
						1 + this.detailList[this.keyData.index