How to solve the responsive value problem of vue3 vuex4 store

Scenario:

When you click the button on the page, the quantity increases, and the value is stored in the store. When the button is clicked, the value does not change.

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

Cause: The store.state.count value is wrong. Although it can be taken out, it loses its responsiveness. That is, when the increment event is triggered, the value of count will not change.

Solution ：

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

Alternatively, use $store.state.count in the tag to get the responsive value.

The above is the detailed content of How to solve the responsive value problem of vue3 vuex4 store. For more information, please follow other related articles on the PHP Chinese website!