vue3 vuex4 store의 반응형 가치 문제를 해결하는 방법

시나리오:

페이지에서 버튼을 클릭하면 숫자가 증가하고 값이 스토어에 저장되며 클릭 이벤트에서는 값이 변경되지 않습니다.

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

원인: store.state.count의 잘못된 값 방법입니다. 꺼낼 수는 있지만 응답성을 잃습니다. 즉, 증가 이벤트가 트리거되면 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 @click="onSubmit">{{ count }}</h2>
  <h2>{{$store.state.count}}</h2>
</template>

또는 태그에서 $store.state.count를 사용하여 반응성 값을 얻을 수도 있습니다.

위 내용은 vue3 vuex4 store의 반응형 가치 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!