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

Question

我有这个设置：

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

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

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

Answer 1

好吧，您需要执行解决方法。asyncData提供了一个参数context.因此，您可以访问您的 vuex 商店：

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

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

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

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