vue中缓存页面数据（刷新不丢失）

admin管理员组

文章数量:1529447

文章目录

• Vue中缓存页面数据的策略与实践
• • 为什么需要缓存页面数据？
  • Vue中的数据缓存策略
  • • 1. Vuex
    • 2. 本地存储（LocalStorage或SessionStorage）
    • 3. 使用第三方库
  • 缓存策略的注意事项
  • 一个简单的原生写法做到刷新不丢失数据

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-cache或vue-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的时候把他放进去。
这是个很有意思的小实验。

本文标签： 缓存页面数据vue