Vue搭配Redis做针对性取值（vue redis取值）

  随着WEB网页应用的日益复杂，不仅仅局限于服务端的处理，前端的应用中也可以利用数据缓存来提高 web 的性能。

Vue 是目前应用广泛的前端开发框架之一，在 Vue 里，我们可以利用localStorage 以及cookie 来进行数据本地缓存；而 Redis 则在这种需求之中十分派得上用场，因为 Redis 是开源的内存数据库，拥有快速的读写速度和一定的数据持久性，有较强的缓存读取效率。

在实际应用里，我们可以将读取较为频繁的数据缓存到 Redis 里，比如：

– 个人的用户名和头像信息；

– 页面的热点数据；

– 后台的统计数据；

这样一来，当用户使用 Vue 做界面开发的时候，前端可以直接从 Redis 里取得想要的需求，而不需要重复发送 Ajax 请求，能够有效地降低 web 的访问延迟，并提升用户体验。

例如，当我们使用 Vue 开发一个用户页面，需要从后台拉取用户头像信息，文章列表，发布数量等等，可以将这样的信息保存到 Redis 里，这样一来，读取 Redis 这一步就可以代替从后台返回的 HTTP 请求，减少了前后端的交互次数，从而提高前端页面的效率。

代码如下：

// 设置需要缓存的数据
let data = {
  username: 'Michael',
  avatar: 'https://img.com/x.jpg',
  articleList: [],
  postCount: 12
}
// 将数据存储到 Redis
let redis = require('redis');
let client = redis.createClient();
client.set('userdata', JSON.stringify(data));
 
// 从 redis 里读取数据
let redis = require('redis');
let client = redis.createClient();
client.get('userdata', (err, reply) => {
  if (err) {
    return console.error(err);
  }
  // 返回正确处理数据
  let data = JSON.parse(reply);
})

我们也可以在项目中使用 vue-lrucache 来辅助使用 vue+Redis。vue-lrucache 能够在本地使用低复杂度的 LRU 缓存算法；并能自动定时更新 Redis 里的缓存数据，这样一来，我们就能实现对数据的只读加载，而不用在前端存储过多的不必要的数据，从而获得更快的访问速度。

综上，Vue 搭配 Redis 的方式非常有利于提高前端页面的性能，我们可以在前端实现更多本地数据缓存，辅助我们提升 web 的效果，让用户体验更加流畅。