Bagaimana untuk menyelesaikan masalah nilai responsif kedai vue3 vuex4

Senario:

Klik butang pada halaman, bilangan bertambah, nilai disimpan dalam kedai dan nilai tidak berubah apabila diklik.

<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 @click="onSubmit">{{ count }}</h2>
</template>

Punca: Cara yang salah untuk mendapatkan nilai store.state.count Walaupun ia boleh dikeluarkan, ia kehilangan tindak balasnya, iaitu apabila peristiwa kenaikan dicetuskan, nilai kiraan akan tidak berubah.

Penyelesaian :

<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 @click="onSubmit">{{ count }}</h2>
  <h2>{{$store.state.count}}</h2>
</template>

Atau, anda juga boleh menggunakan $store.state.count dalam teg untuk mendapatkan nilai responsif.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah nilai responsif kedai vue3 vuex4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!