Wie führe ich einen API-Aufruf im erstellten Hook in Vue 3 durch?

Question

Zurück zu Vue nach einer langen Pause. In meiner Lösung verwende ich die Kompositions-API und nach dem Erstellen der Komponente muss ich einige Daten abrufen, damit ich sie später anzeigen kann. In meiner aktuellen Lösung wird die Vorlage vor dem Aufruf gerendert. Wahrscheinlich ein dummer Fehler, aber ich kann ihn immer noch nicht herausfinden (das ist im Vue 2.0-Hook create() klar).

<template>
  <div>
      <div class="row mb-2 border-top border-bottom" v-for="pizza in pizzas" :key="pizza">
        <div class="col-sm-2">
          <img alt="Vue logo" src="../assets/logo.png" style="height: 100px; width: 135px;">
        </div>
        <div class="col-sm-2 mt-4">
          {{pizza.name}}
        </div>
        <div class="col-md offset-md-2 mt-4">
          price
        </div>
        <div class="col-sm-2 mt-4">
          <button class="btn btn-primary" type="submit">Add</button>
        </div>
      </div>
  </div>
</template>

<script setup>
import {api} from "@/api.js"

let pizzas = null

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

Answer 1

您的解决方案应该如您所愿。您的 api 在创建组件时调用，而不是在组件渲染之后调用，因为它没有在 onMounted 挂钩中调用。此外，你应该让披萨具有反应性。

Answer 2

Composition API 中可用的钩子列表如下：

• https://vuejs.org/api/composition-api-lifecycle.html

与Options API的创建最接近的是在setup()函数中运行代码。但是，为了避免使用 v-if="pizzas" 保护模板，您应该将其实例化为空数组。

而且，显然，您希望它具有反应性，因此它是 ref([])，而不仅仅是 []。

<script setup>

import { ref } from 'vue'
import { api } from '@/api.js'

const pizzas = ref([])

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

</script>

注释：

• 可以保持不变，因为我们将 pizzas 初始化为空数组。如果您以错误的方式启动它，则需要在根包装元素上设置 v-if="pizzas" 保护。
• ref 需要为其分配 .value