首页 > web前端 > Vue.js > 正文

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

WBOY
发布: 2023-05-29 18:55:12
转载
1420 人浏览过

场景:

在页面中点击按钮,数量增加,值是存在store中的,点击事件,值没变。

<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>
登录后复制

原因:store.state.count错误的取值方式,虽然可以取出,但是丧失了响应式,也就是触发increment事件时候,count的值不会变化

解决:

<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>
登录后复制

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

以上是vue3 vuex4 store的响应式取值问题怎么解决的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:yisu.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板