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调用。

nuxtServerInit将在第一页加载时填充商店。而且您不再需要担心任何API请求。我认为这也可以提高性能和响应速度。

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

nuxtServerInit和API请求

1 个答案: