Comment résoudre le problème de valeur réactive du magasin vue3 vuex4

Scénario :

Cliquez sur le bouton de la page, le nombre augmente, la valeur est stockée dans le magasin, et lors de l'événement de clic, la valeur ne change pas.

<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>

Cause : La mauvaise méthode de valeur de store.state.count Bien qu'elle puisse être supprimée, elle perd sa réactivité, c'est-à-dire que lorsque l'événement d'incrémentation est déclenché, la valeur de count ne changera pas

Solution :

<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>

Ou, dans la balise Les valeurs réactives peuvent également être obtenues en utilisant $store.state.count.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!