uniapp页面缓存机制如何实现

在uniapp中如何实现页面缓存机制？有没有具体的配置方法或代码示例？缓存的数据范围和生命周期是怎样的？使用时需要注意哪些问题？

2 回复

uniapp通过keep-alive实现页面缓存。在pages.json中配置页面"style": { "mp-alipay": {"allowsBounceVertical": "NO"}, "navigationBarTitleText": "页面标题" }，使用onLoad和onUnload生命周期管理数据。


UniApp 的页面缓存机制主要通过 Vuex 状态管理和 本地存储 实现，适用于不同场景下的数据持久化需求。以下是具体实现方法：

1. Vuex 状态管理（内存级缓存）

  • 适用场景：页面间共享数据，但刷新后数据丢失。
  • 实现步骤：
    1. 在 store/index.js 中定义状态：
      export default new Vuex.Store({
  state: {
    cachedData: null // 缓存数据
  },
  mutations: {
    setCachedData(state, payload) {
      state.cachedData = payload;
    }
  }
});
    2. 在页面中存储和读取数据：
      // 存储数据
this.$store.commit('setCachedData', { key: 'value' });

// 读取数据
const data = this.$store.state.cachedData;

2. 本地存储（持久化缓存）

  • 适用场景：长期保存数据（如用户登录状态）。
  • 使用 uni.setStorageSync 和 uni.getStorageSync：
    // 存储数据
uni.setStorageSync('cachedKey', '缓存内容');

// 读取数据
const data = uni.getStorageSync('cachedKey');

// 清除数据
uni.removeStorageSync('cachedKey');

3. 页面栈缓存（导航缓存）

  • 适用场景：通过 uni.navigateTo 跳转时，原页面保留在栈中，返回时状态自动恢复。
  • 注意：仅适用于非销毁性跳转，页面需未调用 onUnload。

4. 全局变量缓存

  • 在 App.vue 中定义全局变量：
    // App.vue
export default {
  globalData: {
    cachedInfo: '全局数据'
  }
}
  • 在页面中使用：
    const app = getApp();
console.log(app.globalData.cachedInfo); // 读取
app.globalData.cachedInfo = '新数据';   // 修改

使用建议

  • 短期共享数据：使用 Vuex。
  • 长期持久化：结合本地存储与 Vuex，在 App 启动时读取存储数据到 Vuex。
  • 页面状态恢复：合理利用页面栈机制，避免重复数据请求。

通过以上方法，可灵活实现 UniApp 的页面缓存需求。

回到顶部