Nuxt3 使用 useFetch 取得數據

更新於 2023/03/10閱讀時間約 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
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁,並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行,因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
上一篇文章〈Leanpub 網站使用介面概覽〉介紹了註冊 Leanpub 會員的步驟(非常簡單,且免費)以及 Leanpub 網站的選單操作介面,而這篇文章就要來告訴你建立書籍的步驟。在建立書籍的過程中,你也會大致了解 Leanpub 的免費與付費方案有哪些重要差異。
Thumbnail
#我該投資加密貨幣嗎🤔  昨天有學員請教我,有沒有推薦的律師。因為他跟朋友合資,用加密貨幣USDT付房租,結果USDT大跌,房東認為他詐欺,所以請律師給他寄了存證信函,讓他相當緊張。 談這件事情,先讓我們瞭解一下什麼是USDT。 📍[泰達幣] USDT中文名稱是泰達幣,根據發行公司Tethe
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁,並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行,因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
上一篇文章〈Leanpub 網站使用介面概覽〉介紹了註冊 Leanpub 會員的步驟(非常簡單,且免費)以及 Leanpub 網站的選單操作介面,而這篇文章就要來告訴你建立書籍的步驟。在建立書籍的過程中,你也會大致了解 Leanpub 的免費與付費方案有哪些重要差異。
Thumbnail
#我該投資加密貨幣嗎🤔  昨天有學員請教我,有沒有推薦的律師。因為他跟朋友合資,用加密貨幣USDT付房租,結果USDT大跌,房東認為他詐欺,所以請律師給他寄了存證信函,讓他相當緊張。 談這件事情,先讓我們瞭解一下什麼是USDT。 📍[泰達幣] USDT中文名稱是泰達幣,根據發行公司Tethe