问题描述

nuxt+ssr时使用 lru-cache + vuex 方式存入信息，每次页面刷新都会导致缓存丢失，从而向后端请求获取新的信息。

问题出现的环境背景及自己尝试过哪些方法

使用nuxt期间，想把一些不常更改的东西(类似后台配的站点信息等)存到缓存中，由于服务端渲染时 localstorage 这些都会失效，所以引入了 lru-cache，想通过 lru-cache + vuex的方式实现。

相关代码

lru插件

lru-cache被我做成了插件引入，从而可以在context和 store 中 使用。

import Vue from 'vue'
import LRU from 'lru-cache'

const lcache = new LRU({
    // 缓存队列长度
    max: 0,
    // 缓存有效期
    maxAge: 60000
  })
const LruCache = { 
    // ...
    // ... get/set 方法 
  }
  
  export default ({ app }, inject) => {
    // Set the function directly on the         context.app object
    inject("LruCache",    ()=> {
        return LruCache;
    }  )
  }
 // 最开始有使用 Vue.use，后来发现可有可无就注释了。
// Vue.use(LruCache)

store调用

// ...
  export const mutations = {
    setSiteBase(state, siteBase) {
      state.siteInfo =  siteBase;
      let _this  = this;
      _this.$LruCache().set("qy_siteInfo",state.siteInfo );
    },
  }
 export const actions = {
    async getSiteInfo({state, commit}, val) {
      let _this  =  this;
      if (xxx.isEmpty(state.siteInfo) ) {
           // 当state.siteInfo为空时，获取缓存中的数据赋值
          let  siteInfo =   _this.$LruCache().get("qy_siteInfo");
          if ( xxx.isEmpty(siteInfo)) {
                // 缓存中数据获取为空，获取远程数据返回
              siteInfo  =  await _this.$axios.get('/siteInfo/all').then(res => {
               let resp  = res.data;     
               return resp.content; 
             })
         // 更新store.siteInfo数据
         commit('setSiteBase',  siteInfo);
      }
 }
 // ...

最后在pages目录下的页面中 fetch + mapState获取信息。

async fetch({ store, params }) {
  await store. dispatch('siteInfo/getSiteInfo');
},
computed: {
...mapState({
  siteInfo: state => state.siteInfo.siteInfo
})

你期待的结果是什么？实际看到的错误信息又是什么？

记得看着说lru-cache是服务器缓存，按说只要有一次缓存数据后，其他不管哪个用户请求不应该就可以一直使用这个缓存数据直到过期么？
现在开发环境下浏览器只要一刷新，缓存就消失了，怎样才能保证第一次进入获取数据，之后页面刷新缓存不置空呢。