vue中缓存页面数据(刷新不丢失)

简介: vue中缓存页面数据(刷新不丢失)

Vue中缓存页面数据的策略与实践

在现代前端开发中,Vue.js已经成为了一个非常受欢迎的框架。Vue的响应式系统、组件化架构和易用的API使得开发者能够高效地构建用户界面。然而,当涉及到单页面应用(SPA)中的数据缓存时,我们可能会遇到一些挑战。在这篇文章中,我们将探讨在Vue应用中缓存页面数据的不同策略,并提供一些实用的示例。

为什么需要缓存页面数据?

在单页面应用中,用户在不同页面(实际上是视图或组件)之间导航时,不会触发完整的页面刷新。这意味着如果我们在某个页面加载了数据,当用户返回该页面时,重新加载数据可能是不必要的,也是浪费资源的。通过缓存页面数据,我们可以:

  • 提高性能:减少不必要的网络请求和服务器负载。
  • 改善用户体验:使页面切换更加迅速,减少等待时间。

Vue中的数据缓存策略

1. Vuex

Vuex是Vue.js的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。通过使用Vuex,我们可以在全局状态中存储页面数据,并在需要时访问这些数据。

示例

假设我们有一个显示文章列表的页面,我们可以这样使用Vuex来缓存文章数据:

// store.js
export default new Vuex.Store({
  state: {
    articles: []
  },
  mutations: {
    setArticles(state, articles) {
      state.articles = articles;
    }
  },
  actions: {
    async fetchArticles({ commit }) {
      // 假设我们有一个API接口返回文章数据
      const response = await axios.get('/api/articles');
      commit('setArticles', response.data);
    }
  }
});

// 在组件中
computed: {
  ...mapState(['articles'])
},
methods: {
  ...mapActions(['fetchArticles'])
},
created() {
  if (this.articles.length === 0) {
    this.fetchArticles();
  }
}

在这个示例中,fetchArticles action会在组件创建时被调用,但只有当articles数组为空时才会发起网络请求。如果articles数组已经被填充(可能是从之前的页面访问中),则不会重新加载数据。

2. 本地存储(LocalStorage或SessionStorage)

另一个缓存页面数据的选项是使用Web API提供的本地存储机制。LocalStorage和SessionStorage都允许你在用户的浏览器上存储键值对数据。这些数据在页面刷新甚至浏览器重启后仍然可用(对于LocalStorage)。

示例

// 保存数据到localStorage
localStorage.setItem('articles', JSON.stringify(articles));

// 从localStorage获取数据
const cachedArticles = JSON.parse(localStorage.getItem('articles'));

// 在Vue组件中使用
created() {
  const cachedArticles = JSON.parse(localStorage.getItem('articles'));
  if (cachedArticles) {
    this.articles = cachedArticles;
  } else {
    this.fetchArticles().then(articles => {
      localStorage.setItem('articles', JSON.stringify(articles));
      this.articles = articles;
    });
  }
}

在这个示例中,我们在组件创建时检查LocalStorage中是否有缓存的文章数据。如果有,则使用这些数据;如果没有,则发起网络请求获取数据,并将其存储在LocalStorage中以供将来使用。

3. 使用第三方库

还有一些第三方库可以帮助我们更容易地在Vue应用中实现数据缓存,比如vue-cachevue-persistedstate(用于Vuex持久化状态)。

示例

使用vue-persistedstate插件持久化Vuex状态:

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    articles: []
  },
  mutations: { /* ... */ },
  actions: { /* ... */ },
  plugins: [
    createPersistedState()
  ]
});

在这个示例中,我们添加了一个Vuex插件,它会自动将Vuex状态保存到LocalStorage(或其他指定的存储),并在应用重新启动时恢复状态。

缓存策略的注意事项

  • 数据的新鲜度:缓存的数据可能会过时。你需要考虑何时刷新数据,以及如何通知用户数据已经更新。
  • 敏感数据:不要缓存敏感数据,如用户认证信息。这些数据应该始终从服务器安全地获取。
  • 存储限制:LocalStorage和SessionStorage都有存储限制。大量数据可能会导致存储问题。
  • 性能考虑:虽然缓存可以提高性能,但读写本地存储也可能有性能开销。
  • 代码维护:随着应用的增长,管理缓存逻辑可能会变得复杂。确保代码清晰且可维护。

一个简单的原生写法做到刷新不丢失数据

结合以上提到的技术,在不引入第三方库的情况下:

<template>
  <div>
    {{ zhujiao }}
    <el-button @click="ccc"></el-button>
  </div>
</template>

<script>
  export default {
    name: 'evaluateManage',
    data() {
      let a = localStorage.getItem("cache")? JSON.parse(localStorage.getItem("cache")):{}
      return Object.assign({
        zhujiao: 'sands',
      },a)
    },
    methods:{
      ccc(){
        this.zhujiao += "1"
      }
    },
    beforeUpdate() {
      console.log(this.$data);
      localStorage.setItem("cache",JSON.stringify(this.$data))

    }
  }
</script>

<style scoped></style>

利用beforeUpdate钩子,每次数据更新就把他持久化,初始化data的时候把他放进去。

这是个很有意思的小实验。

相关文章
|
1月前
|
缓存 NoSQL 算法
17- 数据库有1000万数据 ,Redis只能缓存20w数据, 如何保证Redis中的数据都是热点数据 ?
保证Redis中的20w数据为热点数据,可以通过设置Redis的LFU(Least Frequently Used)淘汰策略。这样,当数据库有1000万数据而Redis仅能缓存20w时,LFU会自动移除使用频率最低的项,确保缓存中的数据是最常使用的。
82 8
|
16天前
|
存储 缓存 测试技术
有效使用缓存时需要缓存动态数据吗?
【6月更文挑战第7天】本文探讨了如何有效地缓存数据以提升应用性能。关键在于选择合适的数据进行缓存和适时缓存。缓存不应被视为永久存储,应同时维护原始数据存储。
74 2
有效使用缓存时需要缓存动态数据吗?
|
18天前
|
缓存 NoSQL 中间件
应对数据库不断膨胀的数据:缓存和队列中间件
【6月更文挑战第5天】该文探讨了优化数据库使用以提升应用系统性能的策略。文中建议利用Redis缓存和MQ消息队列作为辅助工具,以进一步优化性能和减少资源消耗。
19 2
应对数据库不断膨胀的数据:缓存和队列中间件
|
2天前
|
缓存 安全 算法
Go 中使用 map 实现高效的数据缓存
Go 中使用 map 实现高效的数据缓存
|
1天前
|
存储 缓存 JavaScript
vue的缓存组件 | 详解KeepAlive
vue的缓存组件 | 详解KeepAlive
18 6
|
22天前
|
缓存 JavaScript 前端开发
Vue 3的事件监听缓存如何优化性能?
【5月更文挑战第31天】Vue 3的事件监听缓存如何优化性能?
20 1
|
1月前
|
消息中间件 缓存 监控
中间件如果缓存中存在所需的数据(缓存命中)
【5月更文挑战第12天】中间件如果缓存中存在所需的数据(缓存命中)
36 3
|
1月前
|
存储 缓存 监控
|
1月前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
42 1