NuxtJS 在使用 Nuxt-Link 访问路由时预取数据？

【问题标题】：NuxtJS prefetch Data when visiting route with Nuxt-Link?NuxtJS 在使用 Nuxt-Link 访问路由时预取数据？
【发布时间】：2020-07-06 09:54:33
【问题描述】：

我有这个设置：

index.vue -> 包含不同的<NuxtLink :to="/abc"> 或<NuxtLink :to="/def">

abc.vue 和 def.vue 使用函数 async asyncData() { ... } 从 API 加载服务器端数据。

我的问题是，函数asyncData 仅在第一次请求路径/abc 或/def 时在服务器端执行。感谢 NuxtJS 的文档，我知道这是正常行为。但是使用<Nuxt-Link>时如何从服务器上预取的API获取数据呢？

【问题讨论】：

【解决方案1】：

你需要做一个解决方法。 asyncData 提供了一个参数 context。这样你就可以访问你的 vuex 商店了：

asyncData({store}) {
   store.commit("somecommit", "somevar");
}

在您的 vuex 商店中，您在某处有一个状态，例如 link1。

通过您的提交，您可以更改该状态。

现在你可以使用<NuxtLink :to="$store.state.link1">

【讨论】：