如何使用 Vue 3 和组合 api 在渲染之前获取数据

Question

我想从 API 获取一些数据，然后填充我的商店（例如用户信息），但在整个页面和组件加载之前我找不到实现此操作的方法。

我发现有一个名为

beforeRouteEnter

 的方法，您可以将其与选项 api 一起使用，但是如果我想使用组合 api（特别是与 

<script setup>

）怎么办？

我也尝试过这个：

const router = useRouter()

router.beforeResolve(() => {
  // fetch api and populate store
})

还有这个：

router.beforeEach(() => {
  // fetch api and populate store
})

但他们都没有做我需要的事情。

Answer 1

如此处相关问题之一所示：

如何在vue 3中创建的hook中进行api调用？

构图APi的正确方法是简单地制作一个

<script setup>
... imports...

const pizzas = ref([])

const GetPizzas = async () => {
  await api.get('pizza/pizzas/').then((response) => {
    pizzas.value = response.data
  })
}
GetPizzas()

</script>

这实际上是有道理的，因为在compositionAPI中，设置调用是“onLoad”或“onBeforeMount”