uni-app 页面缓存功能：Tab 切换时缓存数据

uni-app 提供了页面缓存功能，可以帮助你在切换 Tab 栏时保留当前页面的数据，避免重复请求数据。这可以显著提升页面加载速度，提升用户体验。

实现步骤

定义全局变量: 在 main.js 中定义一个全局变量，用于存储页面缓存的数据。

// 在main.js中定义一个全局变量，用于存储页面缓存的数据
Vue.prototype.$cacheData = {}

缓存数据: 在需要缓存的页面中的 created 生命周期函数中，将数据存储到全局变量中。

created() {
  if (this.$cacheData[this.$route.path]) {
    // 如果全局变量中已经有缓存的数据，则直接从缓存中获取
    this.data = this.$cacheData[this.$route.path]
  } else {
    // 如果全局变量中没有缓存的数据，则从接口或其他方式获取数据
    // 示例代码：通过接口获取数据
    api.getData().then(res => {
      this.data = res.data
    })
  }
}

更新缓存: 在页面即将离开时的 beforeRouteLeave 生命周期函数中，将当前页面的数据存储到全局变量中。

beforeRouteLeave(to, from, next) {
  // 将当前页面的数据存储到全局变量中
  this.$cacheData[this.$route.path] = this.data
  next()
}

示例代码

// 在main.js中定义一个全局变量，用于存储页面缓存的数据
Vue.prototype.$cacheData = {}

// 在需要缓存的页面中的created生命周期函数中，将数据存储到全局变量中
created() {
  if (this.$cacheData[this.$route.path]) {
    // 如果全局变量中已经有缓存的数据，则直接从缓存中获取
    this.data = this.$cacheData[this.$route.path]
  } else {
    // 如果全局变量中没有缓存的数据，则从接口或其他方式获取数据
    // 示例代码：通过接口获取数据
    api.getData().then(res => {
      this.data = res.data
    })
  }
}

// 在需要缓存的页面中的beforeRouteLeave生命周期函数中，将数据存储到全局变量中
beforeRouteLeave(to, from, next) {
  // 将当前页面的数据存储到全局变量中
  this.$cacheData[this.$route.path] = this.data
  next()
}

总结

通过以上步骤，你就可以实现 uni-app 页面缓存功能，在切换 Tab 栏时，下次返回该页面时，可以直接从缓存中获取数据，提高页面加载速度，提升用户体验。