vue3 vuex4 ストアの応答値の問題を解決する方法

シナリオ:

ページ上のボタンをクリックすると数量が増加し、値がストアに保存されます。ボタンをクリックしても値は変わりません。

<script setup lang="ts">
import { useStore } from &#39;@/vuex&#39;;
const store = useStore()
const onSubmit = () => {
  store.dispatch("incrementAction", 1);
}
let count = store.state.count
</script>
<template>
  <h2 id="nbsp-count-nbsp">{{ count }}</h2>
</template>

原因: store.state.count の値が間違っています。取り出すことはできますが、応答性が失われます。つまり、increment イベントがトリガーされても、count の値は変わりません。

解決策 :

<script setup lang="ts">
import { useStore } from &#39;@/vuex&#39;;
import {computed} from &#39;vue&#39;
const store = useStore()
const onSubmit = () => {
  store.dispatch("incrementAction", 1);
}
let num = computed(() => store.state.count)
</script>

<template>
  <h2 id="nbsp-count-nbsp">{{ count }}</h2>
  <h2 id="store-state-count">{{$store.state.count}}</h2>
</template>

あるいは、タグ内で $store.state.count を使用して応答性の値を取得します。

以上がvue3 vuex4 ストアの応答値の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。