Nuxt 应用加载时将异步数据加载到 vuex 存储中

【问题标题】：Load async data into the vuex store when Nuxt app loadsNuxt 应用加载时将异步数据加载到 vuex 存储中
【发布时间】：2020-07-24 09:50:07
【问题描述】：

我正在Nuxt 中试用一个项目。到目前为止都喜欢它，除了我对如何从外部异步服务加载数据感到有点困惑，以便从第一条路线就可以在Vuex 中使用它。

我尝试在默认布局上添加middleware 以调度存储操作，但我没有看到该服务被立即调用。只有当我更深入地导航到路线时，我才能看到已调度的操作。

我在一个标准的 Vue 项目中做了类似的事情，并将created 方法添加到App.vue。 Nuxt有类似的方法吗？

【问题讨论】：

【解决方案1】：

您需要的是 fetch。

fetch 方法（如果已设置）会在每次加载组件之前调用（仅适用于页面组件）。它会在服务器端调用一次（在第一次向 Nuxt 应用发出请求时），在导航到更多路由时会在客户端调用。

警告：您无权通过此内部 fetch 访问组件实例，因为它是在启动组件之前调用的。

async fetch({ store }) {
  await store.dispatch('your-action')
}

如果需要参数：

async fetch({ store, params }) {
  await store.dispatch('your-action', params.id)
}

我举了一个 id 的例子。参数名称取决于您的页面名称。

_id => params.id
_slug => parmas.slug
...

【讨论】：