Nuxt 状态保持

最近工地没啥砖头搬,找找可以研究的地方

业务需求在Nuxt的SSR状态下,需要记录用户的登录状态.

状态保持有两种方案

1 使用vuex-persistedstate将本地缓存的数据和vuex的数据合并,只能在客户端内拿到token状态

2 使用cookie在vuex nuxtServerInit方法再服务端就将数据合并,可以在服务端渲染之前就拿到token状态

方法一存在的问题:无法在服务端初始化渲染就拿到登录状态,如果你的业务逻辑,在asyncData内就要使用用户的token,这时候是拿不到浏览器的token,只能通过cookie

 

现在业务需要通过token 在asyncData的请求内使用,即选择第二种方式

store/index.js  

●nuxtServerlnit只能写在store/index.js

●nuxtServerlnit仅在服务端执行

 

安装nuxt模块

npm i -s cookie-universal-nuxt  //安装在生产环境

export const actions = {
          //app为当前实例
          //该方法必须声明在store的第一层模块(根模块)index.js文件
          //token 为后台传进来的cookie键名
         nuxtServerInit({ commit }，{ app }) {
             //初始化store的一些信息。是在服务端渲染开始之前
             //两个参数 store和content上下文
            const token = app.$cookies.get("token");
            if (token) {
               console.1og("nuxtServerInit: token:" + token);
               commit("user/SET_TOKEN"，token);//保存token
            }
         }
};

nuxt.config.js

 

modules: ["cookie-universal-nuxt"],

登录后存cookie

this.$cookies.set('cookie-name', 'cookie-value', {
  path: '/',
  maxAge: 60 * 60 * 24 * 7
})