uniapp页面缓存有什么好方法?

目前切换页面再返回该页面会重新加载数据,太浪费性能,uniapp又没有router-view 的语句有啥好办法啊?或者什么其他缓存的好办法?存本地这种也不太好啊?

以下答案引用自GPT-3大模型,请合理使用:

,劳烦了

1、首先,你可以在当前页面中设置一个`data`对象,里面存储页面数据,如果是跳转到其他页面,你就可以在这个`data`里保存需要的状态,这样跳回来的时候,你才能读取到上次的状态,代码如下:

```js
// data.js
export default {
  data: {
    pageState: '', // 保存页面状态
    pageData: {} // 保存页面数据
  }
}

// 页面A
import data from './data.js'

Page({
  data: {
    pageState: data.pageState,
    pageData: data.pageData
  },
  onShow() {
    if (data.pageState) {
      // 如果有数据,就直接从data.js中拿出来
    } else {
      // 否则,就去请求接口拿数据
    }
  }
})

2、另外,关于uni-app页面缓存,官方也提供了一些api,比如封装uni.setStorageSync()方法,用于将页面状态或者其他数据缓存到本地,后续再访问可以直接从本地拿数据,以节省网络开销。具体用法可以参考官网文档:
https://uniapp.dcloud.io/ap

该回答引用GPTᴼᴾᴱᴺᴬᴵ
在 Uniapp 中实现缓存页面的方法有很多种,下面列举一些可能会有用的方法:

  1. 使用uni-simple-router插件
    uni-simple-router 是一个轻量级的路由插件,它提供了页面缓存功能。通过该插件可以在路由配置中设置需要缓存的页面,当页面被缓存后,在切换到其他页面再返回时,页面将不会重新加载,而是从缓存中读取。使用该插件需要先安装和配置。

  2. 使用vuex进行状态管理
    在Vue.js中,Vuex是一个状态管理库,可以用于全局管理应用程序的状态。可以将需要缓存的数据存储在Vuex中,当页面切换时,从Vuex中读取数据,这样就可以避免页面重新加载的问题。当然,需要考虑存储在Vuex中的数据的大小和影响性能。

  3. 使用localStorage进行本地存储
    localStorage是浏览器提供的本地存储API,可以将数据存储在浏览器中,下次打开应用时可以从localStorage中读取数据。可以将需要缓存的数据序列化后存储在localStorage中,下次打开应用时再反序列化获取数据。但是需要注意,localStorage的存储容量有限制,如果存储数据过大可能会影响性能。

  4. 使用sessionStorage进行会话存储
    sessionStorage与localStorage类似,不同之处在于sessionStorage的存储时间是会话期间,即当用户关闭浏览器窗口或标签页时,数据就会被清除。因此,可以将需要缓存的数据存储在sessionStorage中,当用户切换页面时,从sessionStorage中读取数据。但是需要注意,当用户关闭浏览器窗口或标签页时,数据将会被清除。

总之,以上是几种比较常用的缓存页面的方法,可以根据实际情况选择适合自己的方法。