Nuxt3のuseStateの使い方についてメモ

Nuxt3のuseStateについての自分用メモ
(ReactのuseStateとは名前は一緒だが少し違うみたい)

初期値の宣言は以下の例の通り行う

const isLoaded = useState('isLoaded', () => false);

値の更新は以下のように行う

isLoaded.value = true;

上記だけだと普通にコンポーネント内のstateとしてref等と同様に使用ができるが、Composable Functionと組み合わせることでグローバルなstate管理が手軽に行える

composables/useLoaded.js

export useLoaded = () => {
  const isLoaded = useState('isLoaded', () => false);
  return {
    isLoaded,
    updateLoaded: () => { isLoaded.value === !isLoaded }
  }
}

components/hoge.js

<script setup>
import { isLoaded, updateLoaded } = useLoaded();

onMounted(() => {
  updateLoaded()
})
</setup>

<template>
  <div v-if="!isLoaded">Loading...</div>
</template>

グローバルなState管理はReactのReduxで止まっていたので最近はだいぶ手軽にできるんだなと感じました