关于vue3 vuex4 store的响应式取值问题解决
更新时间：2022年08月25日 11:59:34 作者：最爱小虾
这篇文章主要介绍了vue3 vuex4 store的响应式取值问题，在实际生活中遇到这样一个问题:在页面中点击按钮,数量增加,值是存在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>
<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取值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue Element Sortablejs实现表格列的拖拽案例详解
这篇文章主要介绍了Vue Element Sortablejs实现表格列的拖拽案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理
vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求，目前支持上下左右无缝滚动，单步滚动，及支持水平方向的手动切换功能，本节介绍，vue添加 vue-seamless-scroll实现自动无缝滚动的效果，并对应添加点击事件2023-01-01
Token是身份验证后服务端返回的令牌,常用于访问授权API和页面权限校验,Token数据可存储在本地或Vuex中,本地存储可实现数据持久化,这篇文章主要介绍了vue登录成功之后的token处理详细步骤,需要的朋友可以参考下2024-10-10
这篇文章主要为大家详细介绍了一些vue使用axios的小技巧,文中的示例代码讲解详细,对我们深入掌握vue有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要介绍了vue中$set的使用(结合在实际应用中遇到的坑),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
今天小编就为大家分享一篇Vue引用Swiper4插件无法重写分页器样式的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下2018-01-01
这篇文章主要为大家详细介绍了vue组件间通信解析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
vue-cli3在main.js中console.log()会报错的解决
这篇文章主要介绍了vue-cli3在main.js中console.log()会报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件,下面这篇文章主要给大家介绍了关于如何基于vue2实现一个日历组件的相关资料,需要的朋友可以参考下2022-12-12
最新评论