Vue Nuxt 3 useFetch 查詢參數

本篇介紹Vue Nuxt 3的useFetch呼叫API時帶入查詢參數(Query Parameter)。

查詢參數就是在url後面加上?key1=value1&key2=value2的名值對參數，例如?status=pending。

事前要求

參考「Vue Nuxt 3 useFetch pending」。

修改API

修改server/api/order.get.js，使用getQuery取得查詢參數，例如下面取得的參數名為'status'。

訂單資料orders新增status屬性，並根據查詢參數篩選並回傳。

server/api/order.get.js

export default defineEventHandler(async(event) => {
  const { status } = getQuery(event) // 取得查詢參數

  await new Promise(r => setTimeout(r, 2000)) // 模擬延遲
  
  const orders = [
    { id: 10001, status: 'pending' },
    { id: 10002, status: 'done' },
    { id: 10003, status: 'pending' },
  ]

  // 根據查詢參數篩選訂單
  const filtered = status ? orders.filter(o => o.status === status) : orders
  return filtered
})

修改頁面

修改[出口業務]頁面pages/home/export/index.vue，呼叫API時帶入查詢參數status=pending，並顯示訂單狀態。

pages/home/export/index.vue

<template>
  <div>
    <h1>出口業務</h1>

    <p v-if="pending">資料載入中...</p>
    <p v-else-if="error" class="error">資料載入失敗</p>
    <p v-else-if="orders.length === 0">沒有訂單資料</p>
    <ul v-else>
      <li v-for="order in orders" :key="order.id">
        <NuxtLink :to="`/home/export/${order.id}`">
          訂單 #{{ order.id }}, 狀態: {{ order.status }}
        </NuxtLink>
      </li>
    </ul>

  </div>
</template>

<script setup>
const { data: orders, pending, error } = useFetch('/api/orders?status=pending', {
  default: () => [],
})
</script>

<style scoped>
.error {
  color: red;
}
</style>

github

可以看到僅返回狀態為pending的訂單。接者把寫死在url的查詢參數改為從搜尋欄輸入。