关于vue3 vuex4 store的响应式取值问题解决
作者:最爱小虾 时间:2024-05-02 16:32:55
场景:
在页面中点击按钮,数量增加,值是存在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也能取得响应式的值。
来源:https://www.cnblogs.com/wang715100018066/p/16623771.html
标签:vue,3,vuex4,取值
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
5个款MySQL常用维护管理工具
2010-10-25 19:45:00
![](https://img.aspxhome.com/file/UploadPic/201010/25/20101025203549207s.jpg)
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2022-04-14 00:02:53
基于webpack.config.js 参数详解
2024-05-02 16:28:30
Python光学仿真之对光的干涉理解学习
2021-05-24 04:47:52
![](https://img.aspxhome.com/file/2023/6/110406_0s.png)
python中实现栈的三种方法
2023-02-10 18:17:14
Python Pandas处理CSV文件的常用技巧分享
2022-06-18 12:56:19
![](https://img.aspxhome.com/file/2023/1/99621_0s.png)
Pandas数据结构中Series属性详解
2021-12-13 22:32:17
Python首次安装后运行报错(0xc000007b)的解决方法
2023-12-15 12:33:49
![](https://img.aspxhome.com/file/2023/7/103157_0s.png)
Elasticsearches通过坐标位置实现对附近人的搜索
2023-05-23 16:16:12
Windows安装MySQL8.0.28.0.msi方式(图文详解)
2024-01-24 14:55:24
![](https://img.aspxhome.com/file/2023/6/115316_0s.png)
ASP中如何判断一个字符是不是汉字
2008-05-04 12:47:00
Flask框架踩坑之ajax跨域请求实现
2023-12-25 01:28:02
![](https://img.aspxhome.com/file/2023/3/80703_0s.png)
如何用Anaconda搭建虚拟环境并创建Django项目
2022-02-25 02:30:21
![](https://img.aspxhome.com/file/2023/0/80800_0s.png)
Python将二维列表list的数据输出(TXT,Excel)
2021-06-11 05:23:20
![](https://img.aspxhome.com/file/2023/5/95165_0s.png)
Oracle如何直接运行OS命令(上)第1/2页
2010-07-30 12:54:00
Django接收照片储存文件的实例代码
2022-06-01 09:05:29
WEB2.0网页制作标准教程(6)XHTML代码规范
2007-12-13 13:03:00
Centos7.4环境安装lamp-php7.0教程
2023-11-16 03:07:24
![](https://img.aspxhome.com/file/2023/5/103415_0s.png)
基于ExtJs框架的B/S高级查询界面
2008-10-07 18:05:00
![](https://img.aspxhome.com/file/UploadPic/200810/7/2008107181135263s.gif)
微软建议的ASP性能优化28条守则(2)
2008-02-22 17:02:00