Nuxt 3.12.1 の useState の不具合

例

こんな簡単なコードでも正常に動かない

<script setup lang="ts">
const counter = useState('counter', () => 0)
</script>

<template>
  <div>
    Counter: {{ counter }}
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
  </div>
</template>

暫定解決

plugins/payload-reactivity.client.ts ファイルを以下の内容で作成すると動くようになった

export default defineNuxtPlugin(nuxtApp => {
  const payload = nuxtApp.payload

  for (const key in ['_errors', 'data']) {
    if (!isReactive(payload[key])) {
      payload[key] = shallowReactive(payload[key])
    }
  }

  if (!isReactive(payload.state)) {
    payload.state = reactive(payload.state)
  }

})

正式対応

次のバージョンを待つのが良さそう

Issue

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

プロフィール・経歴