如何在通用渲染时初始化 Nuxt.js 中的状态，其中包括 localStorage答案

【问题标题】：How do I initialise state in Nuxt.js which includes localStorage while Universal Rendering如何在通用渲染时初始化 Nuxt.js 中的状态，其中包括 localStorage
【发布时间】：2021-04-30 23:12:55
【问题描述】：

场景

首先，让我从我的流程开始。
我将令牌存储在 localStorage 中（我知道我不应该这样做。）然后，每当我的 Nuxt 应用程序启动时，我想从 localStorage 获取令牌，使用 API 调用对其进行验证，并相应地初始化状态。

问题

我正在使用服务器端渲染和 Nuxt 初始化状态服务器端。因此，localStorage 在那里无法访问。

建议的解决方法

我创建了一个动作，它执行Scenario 中解释的任务，并且该动作由layouts/default.vue 的mounted() 触发

谁能推荐一个更好的工作流程或验证这是否是正确的做事方式？

【问题讨论】：

标签： javascript vue.js web nuxt.js

【解决方案1】：

你可以使用typeof window === 'undefined'判断它是否运行在服务器端，跳过你只想在客户端运行的代码，就像：

if (typeof window !== 'undefined') {
   // your code
}

你可以在created/beforeCreate/asyncData 中使用它，如果你的代码在mounted()中，你可能不需要这样做，'case这个Lifecycle Hooks只在客户端运行。

【讨论】：

``` if(process.client){ //在客户端而不是服务器上执行 } ``

【解决方案2】：

您可以编写一个中间件并调度您的操作来检查其中的令牌并在布局中调用它。 https://nuxtjs.org/docs/2.x/directory-structure/middleware

【讨论】：