關於vue3 vuex4 store的響應式取值問題解決

Posted on by

場景：

在頁面中點擊按鈕，數量增加，值是存在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>
  <h1 @click="onSubmit">{{ count }}</h1>
</template>

原因：store.state.count錯誤的取值方式，雖然可以取出，但是喪失瞭響應式,也就是觸發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>
  <h1 @click="onSubmit">{{ count }}</h1>
  <h1>{{$store.state.count}}</h1>
</template>

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

到此這篇關於vue3 vuex4 store的響應式取值的文章就介紹到這瞭,更多相關vue3 vuex4取值內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：