vue3?vuex4?store的響應(yīng)式取值問題怎么解決

本篇內(nèi)容介紹了“vue3 vuex4 store的響應(yīng)式取值問題怎么解決”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

場景：

在頁面中點擊按鈕，數(shù)量增加，值是存在store中的，點擊事件，值沒變。

<script setup lang="ts">
import { useStore } from '@/vuex';
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錯誤的取值方式，雖然可以取出，但是喪失了響應(yīng)式,也就是觸發(fā)increment事件時候，count的值不會變化

解決：

<script setup lang="ts">
import { useStore } from '@/vuex';
import {computed} from 'vue'
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>

或者，標(biāo)簽中用$store.state.count也能取得響應(yīng)式的值。

“vue3 vuex4 store的響應(yīng)式取值問題怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！