Bagaimana untuk membuat panggilan API dalam cangkuk yang dibuat dalam Vue 3?

Question

Kembali ke vue selepas berehat panjang. Dalam penyelesaian saya, saya menggunakan api komposisi dan selepas mencipta komponen saya perlu mendapatkan beberapa data supaya saya boleh memaparkannya kemudian. Dalam penyelesaian semasa saya, templat diberikan sebelum memanggil. Mungkin kesilapan bodoh tetapi saya masih tidak dapat memikirkannya (ia jelas dalam vue 2.0 - create() hook).

<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

Penyelesaian anda sepatutnya kelihatan seperti yang anda jangkakan. Api anda dipanggil apabila komponen dibuat, bukan selepas komponen dipaparkan, kerana ia tidak dipanggil dalam cangkuk onMounted. Juga, anda harus membuat pizza reaktif.

Answer 2

Senarai cangkuk yang terdapat dalam API Komposisi adalah seperti berikut:

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

Dengan templat 创建最接近的是在setup()函数中运行代码。但是，为了避免使用 v-if="pizzas" dilindungi API Options, anda harus menjadikannya sebagai tatasusunan kosong.

Dan, jelas sekali, anda mahu ia menjadi reaktif, jadi ia 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>

Nota:

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