Nuxt3 使用 useFetch 取得數據

更新於 發佈於 閱讀時間約 1 分鐘
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便:
<script setup>
    import { ref } from 'vue';
    const product = ref();
    const { data: _product} = await useFetch("https://api_url...");
    product.value = _product.value.data;
</script>
本筆記參考:
  1. https://juejin.cn/post/7104071421160063012
  2. https://juejin.cn/post/7086472647575339045
為什麼會看到廣告
avatar-img
21會員
161內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
父元件 傳遞變數時須加上冒號 子元件 接收props用法如下 本筆記參考: 1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2 2. https://juejin.cn/post/7
比如點了商品詳細資料,會導到商品詳細資料頁面並帶上id,或者點了商品分類,將類別id帶過去抓出該類別的商品資料等等。 巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數,要用:to 本筆記參考: https://it
位址登錄->網路資料夾中,輸入NAS資料夾路徑、NAS用戶帳密: 比如這邊我是NAS中有個scanner的user,專門用來掃描文件用的。
首先要先設定兩步驟驗證: 2. 設定完就會出現應用程式密碼: 選取應用程式: 郵件 因為是印表機要用的,所以選取裝置選其他(自訂名稱): 按下產生後,即會產生一組應用程式密碼: 接著到印表機設定後台,找到SMTP設定: 主要伺服器: smtp.gmail.com 連接埠號碼: 465 傳送方位址/
管理Google帳戶 -> 資料和隱私權: 下載您的資料 會進到Google匯出頁面: 選取Gmail按下一步: 選擇轉移目標: 我這邊選傳送到email->建立匯出作業 等完成後,會收到email: 收到的mail: 下載後的zip解壓縮,裡面有個.mbox檔案,這種檔案格式可用Mbox View
1. 開啟本機群組原則編輯器: 搜尋gpedit.msc 2. 路徑: 電腦設定 > 系統管理範本 > Windows 元件 > Windows Update > 管理使用者體驗 > 設定自動更新 3. 設定為已停用: 套用->確定 這樣就完成了,之後想更新系統,就要到「設定」的「Windows U
父元件 傳遞變數時須加上冒號 子元件 接收props用法如下 本筆記參考: 1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2 2. https://juejin.cn/post/7
比如點了商品詳細資料,會導到商品詳細資料頁面並帶上id,或者點了商品分類,將類別id帶過去抓出該類別的商品資料等等。 巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數,要用:to 本筆記參考: https://it
位址登錄->網路資料夾中,輸入NAS資料夾路徑、NAS用戶帳密: 比如這邊我是NAS中有個scanner的user,專門用來掃描文件用的。
首先要先設定兩步驟驗證: 2. 設定完就會出現應用程式密碼: 選取應用程式: 郵件 因為是印表機要用的,所以選取裝置選其他(自訂名稱): 按下產生後,即會產生一組應用程式密碼: 接著到印表機設定後台,找到SMTP設定: 主要伺服器: smtp.gmail.com 連接埠號碼: 465 傳送方位址/
管理Google帳戶 -> 資料和隱私權: 下載您的資料 會進到Google匯出頁面: 選取Gmail按下一步: 選擇轉移目標: 我這邊選傳送到email->建立匯出作業 等完成後,會收到email: 收到的mail: 下載後的zip解壓縮,裡面有個.mbox檔案,這種檔案格式可用Mbox View
1. 開啟本機群組原則編輯器: 搜尋gpedit.msc 2. 路徑: 電腦設定 > 系統管理範本 > Windows 元件 > Windows Update > 管理使用者體驗 > 設定自動更新 3. 設定為已停用: 套用->確定 這樣就完成了,之後想更新系統,就要到「設定」的「Windows U
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
在 Vue 中,methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別,並通過實際範例來幫助你理解。
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
ServeMux ServeMux是一個包含映射的結構,映射會將URL映射到對應的伺服器。 DefaultServeMux DefaultServeMux是net/HTTP中預設的多工器,是ServeMux的實例。多工器要根據URL的請求導向到不同的伺服器。DefaultServeMux是
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
在 Vue 中,methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別,並通過實際範例來幫助你理解。
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
ServeMux ServeMux是一個包含映射的結構,映射會將URL映射到對應的伺服器。 DefaultServeMux DefaultServeMux是net/HTTP中預設的多工器,是ServeMux的實例。多工器要根據URL的請求導向到不同的伺服器。DefaultServeMux是