的响应式取值问题怎么解决

湘潭网小编为大家带来以下内容：

本篇内容介绍了“vue3 vuex4 store的响应式取值问题怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！场景：

在页面中点击按钮，数量增加，值是存在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错误的取值方式，虽然可以取出，但是丧失了响应式,也就是触发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>

或者，标签中用$store.state.count也能取得响应式的值。

“vue3 vuex4 store的响应式取值问题怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注花开半夏网站，小编将为大家输出更多高质量的实用文章！

君子莲(www.junzilian.com)湖南省长沙、株洲、湘潭城市宣传信息网，提供房产,人才招聘,家居装饰,教育,论坛,旅游,特产,美食,天气,娱乐,企业等资讯。