文科少女學程式

這幾天為了完成公司內部前端人員在用的小工具，遇到了一些問題，其中一個問題就是跳出這篇文章大標顯示的錯誤。
錯誤截圖如下：

由於這次使用的是自己沒碰過的nuxt+composition API，所以遇到不少令人有點手忙腳亂的問題。

本次的跳錯情境
我嘗試將api整理成composition function，先把composion function的ts檔案import到需要使用API的component，接著透過解構的方式把要用的API拿出來用。但這樣使用的時候，卻出現上面的錯誤。

更改前的程式碼
*重點觀察行數是截圖的第12行


排除錯誤的方法
修改將API解構出來的這部分程式碼寫的地方，改成寫在呼叫API的那個function外。
更改後的程式碼
*​​​​​​​重點觀察行數是截圖的第9行


​​​​​​​問題發生原因
這裡解構出API使用的步驟，類似import的動作，像是composition API的ref、reactive等，還有這次使用nuxt，從useContext()裡面取得的$axios，都是一樣的概念。但不同於import的是，他使用的地方要在setup()裡面，不可以放在setup外面，也不可以放在setup()裡面的function裡。一開始因為把他放在setup裡面的function裡面，所以跳出"Error: This must be called within a setup function."的錯誤。

貼心小提醒！！
因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。