当前nuxt版本2.14.3
axios数据缓存
场景
纯数据列表展示,不对列表某些值进行手动修改,比如新闻列表等数据流
1. 安装axios-extensions扩展 https://github.com/kuitos/axios-extensions axios-extensions 3.1.3左右 该插件将提供axios数据缓存功能
npm i axios-extensions -S //都安装在生产中
npm i LRUCache -S //v:4.1.5左右
2. 在自定义的axios.js插件里面对axios进行扩展
import { cacheAdapterEnhancer } from 'axios-extensions'
import LRUCache from 'lru-cache' // 为了自定义缓存配置,如果不需要,可以不使用
export default function ({ $axios, redirect }) {
// 请求中使用了useCache: true的话,会被缓存起来以便下次直接返回从而减少服务器压力
let defaultAdapter = $axios.defaults.adapter
let cacheCfg = new LRUCache({
maxAge: 1000 * 10, //有效期10s
max: 1000 // 最大缓存数量
})
$axios.defaults.adapter = cacheAdapterEnhancer(defaultAdapter, { enabledByDefault: false,
cacheFlag: 'useCache', defaultCache: cacheCfg })
}
// 3. 在api请求时添加useCache标志即可,如在某个页面中
export default {
asyncData ({ params,$axios}) {
let id = params.id
return app.$axios.get(`/getDetail/?itemId=${id}`, {useCache: true}).then(res => {
return (res && res.data) || {}
})
}
//注意 只能使用$axios.get() //这种请求方式才能获得缓存功能
//$axios({method:"get"})//无法获得缓存效果
}
注意点:
只有get请求可以被缓存。默认不启用缓存机制
如果需要对数据进行修改,需要对数据进行深克隆,否则,会影响到缓存数据
const res= awite $axios.get('xxxxxxx',{useCache:true})
//返回数据res={name:1,code:123}
delete res.code
return {data:res} //第一次数据请求完成
//此时缓存中res为{name:1},delete影响了缓存中数据
深拷贝一份请求的结果
const result= JSON.parse(JSON.stringify(res)) //深拷贝一份,用这份数据delete不会影响缓存
组件缓存
- 不能依赖全局状态 比如依赖vuex的数据变更
- 不能对其他上下文组件有影响,
- 页面级添加serverCacheKey后,asyncData还是会执行,不过他的created等钩子函数将不再执行
场景
适用于单纯的v-for的数据展示列表 并且是根据某个属性id变更后才需要更新的列表
serverCacheKey: props => props.item.id + '::' + props.item.last_updated //属性id 加上时间戳
其他静态组件,永远不可能有更新的,比如页脚foouter,官网顶部header等静态内容,可以直接返回一个静态字符串,
配置
npm i @nuxtjs/component-cache -S //下载组件缓存插件,官方社区提供
// 2. 在nuxt.config.js中配置模块
{
modules: [
['@/nuxtjs/component-cache', { maxAge: 1000 * 60 }]
]
}
// 3. 按照vue ssr组件缓存的规则,在需要缓存的组件中,添加serverCacheKey,必须定义name,
// 在某vue组件中
<script>
export default {
name: 'cache-com',//需要定义唯一的name字段
props: {
post: {
type: String,
required: true
}
},
serverCacheKey: props => props.post,//由这个属性决定,如果变更,则组件将重新渲染,常量则会被静态化
}
</script>
serverCacheKey: () => Math.floor(Date.now() / (1000 * 60)),//一分钟刷新一次
组件缓存,只是缓存了dom结构,如created等钩子中的代码逻辑并不会被缓存,如果其中逻辑会影响上下边变更,是不会再执行的,此种组件也不适合缓存