在nuxt框架的asyncData方法中使用cookie缓存数据

如果只想看代码可以戳目录的《完整代码》模块~

问题描述

asyncData是nuxt提供的一个方法，帮助我们在服务端时进行一些处理，支持异步接口调用，具体用法可戳官网：nuxt中文网对asyncData用法的介绍

例如常见的电商系统的商品详情为例，我们可能希望将获取商品详情接口的调用放在服务端处理，减少用户对于页面加载后loading的观感

但，我们又可能会涉及到，获取接口时将存在缓存中的信息作为参数传给后台的情况，不管这个数据是使用localstorage还是cookie，大家要知道，在页面还在服务端的情况下，我们是没办法直接使用localStorage.getItem和document.cookie的，这时就需要用到asyncData方法中传递的参数了

而参数中可以获取cookie数据，获取不了localstorage，所以建议大家如果需要在asyncData中使用缓存数据，就使用cookie储存

---

解决思路

例如我们在网页其他位置填入了cookie

document.cookie = 'name=DeerSilver'

首先，我们需要从页面的asyncData方法传递的参数中获取到cookie

export default {
	asyncData ({ req }) {
		// 这时会输出字符串name=DeerSilver
		console.log(req.cookie)
	}
}

但是！ 如果使用req.cookie只能是页面还在服务端时才能获取到数据，如果当前页面是单页面跳转的，这时req就是undefined，所以我们需要进行一次判断，如果为空，就直接取document.cookie

然后我们需要写一个公用方法将获取到的字符串处理一下，但是下述代码没有进行stringCookie的判断处理，所以还需改良

/*
	@cookieName 需要取出的key
	@stringCookie cookie字符串
*/ 
function getCookie (cookieName, stringCookie) {
  let strCookie = new RegExp('' + cookieName + '[^;]+').exec(stringCookie)[0]
  return unescape(strCookie ? strCookie.toString().replace(/^[^=]+./, '') : '')
}

整体改良后如下：

完整代码

/*
	获取cookie内的数据
	@cookieName 需要取出数据的key
	@stringCookie cookie字符串
*/
function getCookie (cookieName, stringCookie) {
   let strCookie = ''
   try {
     strCookie = new RegExp('' + cookieName + '[^;]+').exec(stringCookie)[0]
   } catch (e) { }
   return unescape(strCookie ? strCookie.toString().replace(/^[^=]+./, '') : '')
}

export default {
	async asyncData ({ req }) {
	   let cookies = req ? req.headers.cookie : document.cookie
	    // 'name'为具体key，这里只是举例
	    let value = getCookie('name', cookies)
		// 使用async await搭配请求异步数据
		let res = await xxx
		return {
			// 这里将处理后的数据合并给data
			// 或直接将从cookie获取到的内容给data
			userName: value
		}
	}
}