vue3 vuex4 store的響應式值問題怎麼解決

場景：

在頁面中點選按鈕，數量增加，數值是存在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錯誤的取值方式，雖然可以取出，但是喪失了響應式,也就是觸發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 @click="onSubmit">{{ count }}</h2>
  <h2>{{$store.state.count}}</h2>
</template>

或者，標籤中用$store.state.count也能取得響應式的值。

以上是vue3 vuex4 store的響應式值問題怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！