Vue 3: Composable
甚麼是composable？在寫純JavaScript的時候，有時會想將一些重複的邏輯抽離出來變成另一個可被其他程式碼使用的函式，在Vue3裡面，composables也是在做一樣的事情；只是跟傳統函式不一樣的是，composables內可以包含Vue的狀態，譬如響應式狀態變數ref、reactive等，或者lifecycle hooks像是onMounted、onUnmounted等。 基本用法
Mar 2, 20262 min read2
Command Palette
Search for a command to run...
#vuejs
Articles tagged with #vuejs
Vue: 查看歷史文件
因為工作上是用Quasar cli搭配Vue3.2，但Vue文件有些範例已經使用版本3.3以上的API，目前看起來官方好像還沒提供各版本的Vue文件，所以只好從GitHub上去找：https://github.com/vuejs/docs 首先找到相應的文件內容點選History 再根據Commit時間找到可能要查詢的文件版本： 點選Browser File去瀏覽該版本的所有檔案 然後
Mar 2, 20261 min read5Vue: readonly的代理坑
最近寫composable要 return 響應式變數，因為希望外部在使用這個composable的時候不要去改動到這個響應式變數，故使用 readonly 去包覆這個響應式變數： // useComposable.js import { readonly } from "vue"; export default useComposable(){ const nested = re
Feb 26, 20261 min read4Pinia: 在Vue元件以外安全地使用pinia
最近才發現Pinia跟React全域狀態管理的使用方式不一樣，有個很方便的特性是，如果要在Vue元件以外使用，只要pinia store是在 app.use(pinia) 後呼叫即可使用，其中更能確保pinia store被呼叫的方式是──在函式(function)內使用： The easiest way to ensure this is always applied is to defer
Feb 25, 20261 min readVue: Provide and Inject
因為工作中的Vue3專案都是用pinia來處理全域狀態問題，不過發現有時候有些跨元件狀態不會到整個應用都需要，但使用props又要用多層傳遞，所以筆記一下比較少用Vue本身的provide、inject機制。 以下使用Vue3 composition API語法為例： Provide // parent component <script setup> import { provide } from 'vue'; provide(key, value); // 參數第一個是injection...
Oct 30, 20241 min read11