nuxtServerInit 和 API 请求

Question

我正在使用 nuxt.js 并且我正在使用 Firebase 作为 API。我正在使用 nuxtServerInit 从 firebase API 获取我的所有产品。我只有 3 个类别和大约 20 种产品，因此 API 请求非常小。

这意味着我可以一次性拿到我所有的产品，然后我会发送这些产品并将它们放入我的商店。

我只是想在我开始完全构建应用程序之前先问问这是否是正确的方法？

• 使用 nuxtServerInit 在 1 次调用中获取所有产品和整个 API
• 将产品列表存储到商店中
• 我使用 _lodash _.get(params.id) 或 _.find(params.id) 来查找产品的详细信息，而不是使用 Axios 再次调用的后续产品详细信息页面。

所以本质上是从 API 获取而不是使用存储进行所有其他访问，而不是通过 Axios 在所有其他页面上的异步数据？

路线 我的路线都是动态的

• 产品（列出所有产品）
• 类别（例如 t-shrits）
• 细节（衬衫的细节）

nuxtServerInit

export const actions = {
    async nuxtServerInit(context){
        return axios.get(URL+'/products.json')
        .then(response => {
            context.dispatch('products/getProducts', response.data)
        })
        .catch(e => context.error(e));
    }
};

Answer 1

在Nuxt.js documentaion：

如果在 store 中定义了动作 nuxtServerInit 并且模式为 通用，Nuxt.js 将使用上下文调用它（仅从 服务器端）。当我们在我们想要的服务器上有一些数据时，它很有用 直接给客户端。

如果您有少量数据（3 个类别和大约 20 种产品）并且您想直接在客户端上使用该数据，我认为将其存储在 state 中是完全可以的。因为，这将帮助您在导航期间避免额外的 API 调用。

nuxtServerInit 将在第一个页面加载时填充存储。而且您无需再担心任何 API 请求。我认为这也会给您带来性能提升和响应能力。

最后但同样重要的是，asyncData 仅在页面中可用（不在组件中），但 fetch 可以从您的任何 Vue 组件中调用。