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的时候把他放进去。

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

相关文章
|
29天前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储(一)
数据的存储--Redis缓存存储(一)
65 1
|
29天前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储(二)
数据的存储--Redis缓存存储(二)
40 2
数据的存储--Redis缓存存储(二)
|
17天前
|
缓存 JavaScript 搜索推荐
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
61 1
|
3天前
|
存储 缓存 算法
分布式缓存有哪些常用的数据分片算法?
【10月更文挑战第25天】在实际应用中,需要根据具体的业务需求、数据特征以及系统的可扩展性要求等因素综合考虑,选择合适的数据分片算法,以实现分布式缓存的高效运行和数据的合理分布。
|
4天前
|
存储 缓存 JavaScript
1.Vue的缓存组件 | 详解KeepAlive
1.Vue的缓存组件 | 详解KeepAlive
21 2
|
20天前
|
缓存 监控 前端开发
处理页面缓存中数据不一致的问题
【10月更文挑战第9天】
32 2
|
26天前
|
消息中间件 缓存 NoSQL
大数据-49 Redis 缓存问题中 穿透、雪崩、击穿、数据不一致、HotKey、BigKey
大数据-49 Redis 缓存问题中 穿透、雪崩、击穿、数据不一致、HotKey、BigKey
41 2
|
3月前
|
缓存 NoSQL Linux
【Azure Redis 缓存】Windows和Linux系统本地安装Redis, 加载dump.rdb中数据以及通过AOF日志文件追加数据
【Azure Redis 缓存】Windows和Linux系统本地安装Redis, 加载dump.rdb中数据以及通过AOF日志文件追加数据
116 1
【Azure Redis 缓存】Windows和Linux系统本地安装Redis, 加载dump.rdb中数据以及通过AOF日志文件追加数据
|
2月前
|
缓存 JavaScript
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
422 1
|
3月前
|
缓存 JavaScript
Vue学习之--------编程式路由导航、缓存路由组件、新的钩子函数(4)(2022/9/5)
这篇文章介绍了Vue中编程式路由导航的方法,包括使用`$router.push`、`$router.replace`、`$router.forward`、`$router.back`和`$router.go`进行路由跳转和历史记录操作,以及如何利用`<keep-alive>`组件缓存路由组件,和Vue Router新增的两个生命周期钩子`activated`和`deactivated`的用法及其在项目中的应用和测试结果。
Vue学习之--------编程式路由导航、缓存路由组件、新的钩子函数(4)(2022/9/5)