ref がリアクティブになってないような気がする
Composition API でロジックを分離していて、local state や API fetch などをまとめたファイル(composable とか hooks みたいなやつ)を書いて、それをuseXxx
関数でまとめて、その関数をコンポーネントの setup 内で import するというごく普通のことをやっていた。
Vue 3 Composition API で async-await を使う方法 | devsakaso
大体 ↑ のような感じ。
// composable.ts
export const useHoge = () => {
const state = ref('')
const fetchApi = async () => {
const response = api.get()
state.value = response
}
}
// Component.vue
setup() {
const { state, fetchApi } = useHoge()
fetchApi()
return { state: state.value }
}
めっちゃ簡略化するとこんな感じで、たぶんごく普通のことをやっていると思うんだけど、これをやっているのに state がずっと初期値(↑ のコードでいうと''
)のまま変わらなくてうんうんうなっている。つらい。