Scene:
Click the button on the page and the number increases. The value exists in the store. Click the event and the value does not change.
<script setup lang="ts">
import { useStore } from '@/vuex';
const store = useStore()
const onSubmit = () => {
("incrementAction", 1);
}
let count =
</script>
<template>
<h1 @click="onSubmit">{{ count }}</h1>
</template>Cause: The wrong way to get the value. Although it can be taken out, the responsiveness is lost, that is, when the increment event is triggered, the value of the count will not change.
solve:
<script setup lang="ts">
import { useStore } from '@/vuex';
import {computed} from 'vue'
const store = useStore()
const onSubmit = () => {
("incrementAction", 1);
}
let num = computed(() => )
</script>
<template>
<h1 @click="onSubmit">{{ count }}</h1>
<h1>{{$}}</h1>
</template>Alternatively, the responsive value can be obtained by using $ in the tag.
This is the end of this article about the responsive value of vue3 vuex4 store. For more related content on vue3 vuex4, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!