NuxtJs asyncData 的用例是什么?
what is the use case of NuxtJs asyncData?
据我所知 asyncData
NuxtJs 页面中的函数在创建组件之前在服务器端呈现。以及当用户在页面加载后在内部页面之间导航时。 fetch
功能非常相似,但我们可以在其中将数据设置为 store
并在路由更改时检查 store
中是否存在数据...
现在的问题是,为什么我要在页面刷新和路由更改时向 API 发送请求?使用 fetch
函数并将数据存储在 vuex 存储中这样就不需要进一步的 API 调用不是更好吗?在 asyncData
函数中需要获取什么样的数据?
例如,如果我想在服务器端呈现的应用程序中显示帖子列表,我认为最好的方法是使用 fetch
属性 来填充 vuex store
之后,在每次更改路线时,我都会在商店内获取数据,并且不需要 API 调用。
该用例用于检索仅与特定页面相关的数据。
例如,您有多个端点 return 有关特定动物的数据,/api/cats、/api/dogs、/api/birds。
当您在浏览器中加载 theapp.com/cats 时,asyncData 函数会从 /api/cats 并将其呈现在服务器端。
同样,对于应用程序。com/dogs,它获取 /api/dogs。
如果有一个 /api/animals 端点包含一个 feed 中的所有动物数据(狗、猫和鸟),则用例会发生变化。
在这种情况下,您将执行一次检索,以使用 nuxtServerInit
之类的内容将所有页面数据填充到商店中
据我所知 asyncData
NuxtJs 页面中的函数在创建组件之前在服务器端呈现。以及当用户在页面加载后在内部页面之间导航时。 fetch
功能非常相似,但我们可以在其中将数据设置为 store
并在路由更改时检查 store
中是否存在数据...
现在的问题是,为什么我要在页面刷新和路由更改时向 API 发送请求?使用 fetch
函数并将数据存储在 vuex 存储中这样就不需要进一步的 API 调用不是更好吗?在 asyncData
函数中需要获取什么样的数据?
例如,如果我想在服务器端呈现的应用程序中显示帖子列表,我认为最好的方法是使用 fetch
属性 来填充 vuex store
之后,在每次更改路线时,我都会在商店内获取数据,并且不需要 API 调用。
该用例用于检索仅与特定页面相关的数据。
例如,您有多个端点 return 有关特定动物的数据,/api/cats、/api/dogs、/api/birds。
当您在浏览器中加载 theapp.com/cats 时,asyncData 函数会从 /api/cats 并将其呈现在服务器端。
同样,对于应用程序。com/dogs,它获取 /api/dogs。
如果有一个 /api/animals 端点包含一个 feed 中的所有动物数据(狗、猫和鸟),则用例会发生变化。
在这种情况下,您将执行一次检索,以使用 nuxtServerInit
之类的内容将所有页面数据填充到商店中