🖥

Nuxt 3.12.1 の useState の不具合

2024/06/28に公開

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

<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

https://github.com/nuxt/nuxt/issues/27536

チャットメンバー募集

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

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

プロフィール・経歴

https://github.com/YumaInaura/YumaInaura

公開日時

2024-06-14

Discussion