nuxtServerInit和API请求

Question

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

所以这意味着我要一次性获得所有产品，然后要分发产品并将其放入我的商店。

我只是想问一问，在开始完全构建应用程序之前，这是否是解决此问题的正确方法？

• 使用nuxtServerInit在一次调用中获取所有产品和整个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中：

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

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

最后但并非最不重要的是，fetch和fetch仅在页面内可用（不在组件中。