如何重新加载异步数据？答案

【问题标题】：How to reload asyncData?如何重新加载异步数据？
【发布时间】：2020-07-31 23:09:52
【问题描述】：

我通过 Nuxt.js 中的 asyncData 从后端获取数据：

  async asyncData ({ app }) {
    const { data: { testimonials } } = await axios('https://example.com/api/testimonials.json')

    return {
      testimonials
    }
  }

站点配置为通用模式 - 页面在服务器上呈现。但是客户端可能有一个 cookie，该 cookie 将验证他是否从 CMS 接收私有内容。

这在客户端导航时有效（使用浏览器中的 cookie 调用 asyncData），但在第一次加载时不会加载私有内容（来自服务器的 HTML）。

有什么方法可以在客户端调用 realod asyncData 吗？我会从隐藏按钮或其他一些逻辑中调用它（例如，浏览器中有一个身份验证 cookie）。

【问题讨论】：

标签： nuxt.js vue-router

【解决方案1】：

您最好在服务器端读取 cookie 并直接为您的用户提供正确的内容！

看看https://www.npmjs.com/package/cookie-universal-nuxt

您可以在 nuxt 路由中间件中读取 cookie，也可以从存储中的 nuxtServerInit 中读取。

【讨论】：

我想在静态服务器上托管前端（Nuxt 应用程序），因此 Nuxt 服务器（生成器）只能访问公共数据。
啊，所以你的网站不是通用模式。但您也可以使用 cookie-universal-nuxt。它适用于服务器端和前端。