So lösen Sie das Responsive-Value-Problem des Vue3- und Vuex4-Stores

Szenario:

Klicken Sie auf die Schaltfläche auf der Seite, die Menge erhöht sich und der Wert wird im Geschäft gespeichert. Beim Klickereignis ändert sich der Wert nicht.

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

Ursache: Die falsche Wertmethode von store.state.count kann zwar entfernt werden, verliert jedoch die Reaktionsfähigkeit, das heißt, wenn das Inkrementierungsereignis ausgelöst wird, ändert sich der Wert von count nicht

Lösung:

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

Oder im Tag können reaktive Werte auch mit $store.state.count abgerufen werden.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Responsive-Value-Problem des Vue3- und Vuex4-Stores. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!