背景:该页面是从其他页面路由过来的,携带了关键参数asin,但是每次刷新会导致asin数据初始化,导致页面没有数据
没缓存之前
刷新之后
很明显用户体验很差,使用vue-ls插件解决这个问题
下载vue-ls 插件 :
npm install vue-ls --save
main.js
import Storage from 'vue-ls'
const options = {
namespace: 'vuejs__', // key键前缀
name: 'ls', // 命名Vue变量.[ls]或this.[$ls],
storage: 'local' // 存储名称: session, local, memory
}
Vue.use(Storage, options)
组件里面
import Vue from 'vue'
// 失效时间
const expire = 12 * 60 * 60 * 1000
export default {
data() {
return {
asin: null,
}
},
created: function() {
// 缓存不存在
if (Vue.ls.get('productAnalysisAsin') == null) {
console.log('缓存asin中...')
this.asin = this.$route.params.asin
// 设置缓存
Vue.ls.set('productAnalysisAsin', this.$route.params.asin, expire)
console.log('缓存asin成功,缓存的asin= ', Vue.ls.get('productAnalysisAsin'))
} else {
// 缓存存在
console.log('asin缓存存在,获取缓存')
this.asin = Vue.ls.get('productAnalysisAsin')
}
}
}