前端废物的自救之路（3）使用Cookie完成Nuxt.js中Vuex的持久化

前端废物的自救之路（3）使用Cookie完成Nuxt.js中Vuex的持久化

为什么需要Vuex持久化

在开发的过程中，我们会使用Vuex来存储用户信息、Token等内容，但Vuex的信息是存储在内存中的，当页面刷新时，内容自然就丢失了。我们需要寻找其他的办法使得刷新页面时Vuex的信息能保存下来，也就是Vuex的持久化。

Nuxt.js中的Vuex持久化方案及其可用性

使用Vue.js时，我们一般用vuex-persist、vuex-persistedstate等框架完成Vuex的持久化，也并不会出什么问题。但是在Nuxt中，情况就不一样了。

在搜索引擎上搜索Nuxt Vuex持久化，可以找到以下解决方案：

1. vuex-persistedstate配合js-cookie

   • 地址：nuxt中vuex数据持久化

   • 可用性：不可用，按照文中的方法配置仍然出现找不到window对象的情况。在配置插件的时候配置了ssr: false，仍然找不到window对象，推测可能是Nuxt或Vuex的版本问题（注：这篇文章是19年12月的）。

2. vuex-persist

• 地址：NuxtJS: Persist Vuex State with vuex-persist

• 可用性：部分可用，配置完成之后不会出现找不到window对象的情况。此方法在除了asyncData之外的方法中都是可用的，但是asyncData方法中并不能访问到localStorage（因为asyncData方法是在服务端执行的，没有localStorage），所以如果不需要在asyncData中使用Vuex的话可以采用这样的方案。

• 相关文章：Nuxt.js with vuex-persist - persisted state not available in asyncData upon page refresh

3. nuxtServerInit方法配合cookie-universal-nuxt
   • 地址：vuex状态持久化在vue和nuxt.js中的区别
   • 可用性：不可用。会提示$cookies对象为undefined。推测可能是Cookie的设置问题。

终极解决方案：js-cookie配合nuxtServerInit实现Vuex持久化

常见的解决方案都不可用，那么我们就需要终极解决方案：js-cookie配合nuxtServerInit。

• 地址：nuxt刷新页面Vuex失效，在axios中使用vuex【vuex-persist，localStorage，Cookie。三种办法解决】中的第三种。
• 可用性：完全可用，但是有一点麻烦（因为要解析Cookie的字符串），但是相比不可用和部分可用已经是很大的进步了。

实现起来也是很简单的。

第一步：安装js-cookie

npm	install --save js-cookie

第二步：设置Vuex时同时设置Cookie

以登录为例，在拿到用户信息后使用js-cookie把用户信息设置到Cookie中。注意Cookie的过期时间要和服务端设置的Token的过期时间保持一致（服务端设置Token的过期时间是4小时），否则Token过期后再访问需要认证的页面会出现循环重定向的问题（我配置了根据Cookie判断用户是否登录的逻辑，并且登录后再访问登录页面会被重定向到后台管理，所以才会出现这样的问题，当然如果没有做这样的配置的话就无所谓了，或者你也可以配置在Token失效后清除Cookie的操作）。

注意expires属性的单位是天，如果需要设置为小时的话可以传入小数。

@/pages/login.vue

import {
    mapMutations } from 'vuex'
import