广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于vue3vuex4store的响应式取值问题解决
  • 416
分享到

关于vue3vuex4store的响应式取值问题解决

2024-04-02 19:04:59 416人浏览 八月长安
摘要

场景: 在页面中点击按钮,数量增加,值是存在store中的,点击事件,值没变。 <script setup lang="ts"> import { useStore }

场景:

在页面中点击按钮,数量增加,值是存在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取值内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 关于vue3vuex4store的响应式取值问题解决

本文链接: https://www.lsjlt.com/news/166005.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 关于vue3vuex4store的响应式取值问题解决
    场景: 在页面中点击按钮,数量增加,值是存在store中的,点击事件,值没变。 <script setup lang="ts"> import { useStore } ...
    99+
    2022-11-13
  • 关于vue2响应式缺陷的问题
    目录vue2响应式缺陷1.对象新增的属性没有响应式2.数组的部分操作没有响应式vue2与vue3的响应式原理vue2响应式vue3响应式雏形vue3的响应式相较于vue2的优势vue...
    99+
    2022-11-13
  • 关于Centos7中Vscode无响应的问题及解决方法
    版本信息 虚拟机版本:VMware® Workstation 16 Pro 16.1.2 build-17966106 Linux系统:CentOS7 问题描述 在CentO...
    99+
    2022-11-12
  • 关于springboot响应式编程整合webFlux的问题
    在servlet3.0标准之前,是每一个请求对应一个线程。如果此时一个线程出现了高延迟,就会产生阻塞问题,从而导致整个服务出现严重的性能情况,因为一旦要调用第三方接口,就有可能出现这...
    99+
    2022-11-13
  • 关于Python列表的索引取值问题
    本篇文章给大家带来了关于Python的相关知识,其中主要介绍了Python 列表的索引取值,本节重点掌握多次索引取值的语法:列表[索引][索引],结合示例代码给大家介绍的非常详细,下面一起来看一下,希望对大家有帮助。php零基础到就业直播视...
    99+
    2022-09-13
  • 关于RsaPublicKeynotFind的问题及解决
    目录Rsa Public Key not Find的问题问题描述解决方案Navicat15注册机出现 rsa public key not foundRsa Public Key n...
    99+
    2022-11-13
  • 关于@Value取值为NULL的解决方案
    目录@Value取值为NULL的问题@Value取值为NULL原因分析一.@Value(“${}”)的使用二.@Value{“#{}”...
    99+
    2022-11-13
  • layui中树形关于取值传值问题的示例分析
    这篇文章主要介绍了layui中树形关于取值传值问题的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:这个是我们需要的效果,实...
    99+
    2022-10-19
  • vue3结构赋值失去响应式引发的问题怎么解决
    这篇文章主要介绍“vue3结构赋值失去响应式引发的问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3结构赋值失去响应式引发的问题怎么解决”文章能帮助大家解决问题。原始值的响应式系统的...
    99+
    2023-07-02
  • 关于react+antd样式不生效问题的解决方式
    目录1、添加antd组件样式不生效2、运行yarn eject时暴露配置文件报错3、less-loader版本过高,删除旧版本,下载低版本即可4、项目中引入icon代码报错补充:Re...
    99+
    2022-11-13
  • vue3原始值响应方案及响应丢失问题怎么解决
    一、ref 的引入ref 就是解决 proxy 无法直接代理原始值的问题。我们先来看 ref 的使用:const name = ref('小黑子')ref 是怎么实现的呢?其实就是用对象“包裹”原始值。我们再来看一下 ref...
    99+
    2023-05-14
    Vue3
  • 关于React中使用window.print()出现页面无响应问题解决记录
    目录一、问题背景:二、问题原因: 三、问题解决:总结:一、问题背景: window.print()页面打印出现页面无响应 看了网上很多办法都是让用window.locat...
    99+
    2022-11-12
  • 关于vuepress部署出现样式的问题及解决
    目录vuepress部署出现样式问题vuepress个人博客部署遇到的一些问题1、js和css出现404问题2、每次都要重复操作打包、运行、上传github很麻烦怎么办?3、gith...
    99+
    2022-11-13
  • 如何解决Dreamweaver中关于应用CSS的小问题
    这篇文章主要介绍了如何解决Dreamweaver中关于应用CSS的小问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。  Dreamweaver是集网页制作和管理网站于一身的...
    99+
    2023-06-08
  • 关于Read-only file system问题的解决
    目录Read-only file system问题linux系统变为只读出现提示Read-only file system问题描述问题原因解决方法1.使用2.卸载只读分区3.fsck修复磁盘文件4.直接remount或者...
    99+
    2023-06-17
    Read-only file system问题 Read-only file system 解决Read-only file system
  • 关于Assert.assertEquals报错的问题及解决
    目录前提(也是主要问题)用testCompile导入junit4.12在IDEA的自动提示下点进去Assert看了下发现后面看了才知道导错包本来以为是junit依赖没导进来里面Ass...
    99+
    2022-11-13
  • 关于OLE32.dll的问题,如何解决
    OLE32.dll是一个Windows操作系统的动态链接库文件,用于支持OLE(Object Linking and Embeddi...
    99+
    2023-08-19
    问题
  • 解决SpringBoot @value注解取不到值的问题
    关于@value的springapplication容器的问题 1.在src/main/resources下创建stu.properties文件 ## student.name=...
    99+
    2022-11-12
  • 关于Android8 获取应用容量的问题(权限获取)
    在Android 8.0以后,google出于安全的考虑,废除了以前的方法,但是为我们提供了新的API,我们可以使用StorageStatsManager 类来获取应用大小、用...
    99+
    2022-06-06
    Android
  • vue3解构赋值失去响应式引发的问题思考
    目录前言原始值的响应式系统的实现为什么ES6 解构,不能随意使用会破坏他的响应式特性proxy背景实现原理解构 props 对象,因为它会失去响应式直接赋值rea...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作