vue3中如何使用 mapState

已于 2022-07-16 16:21:03 修改
阅读量5.8k 收藏 8
点赞数 4
分类专栏： JS基本数据类型与应用数据类型 文章标签： 大数据
于 2022-07-16 16:09:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65382120/article/details/125820878
版权

直接看代码     （最后有封装好的hook直接用即可）

 我们来看：28行就是一个一个拿，当然会这个一个一个拿也完全没问题，能够实现

不过我数据多的时候，很繁琐，所有我们要借助mapState来映射 下面我们开始：

首先利用mapState拿到所有数据，当然，这样拿到的是一个一个的函数，这样是不行的

 拿到的格式大概就是31行这样

 那么我们要把这个函数转变成值

33行，我们声明一个空对象，用于存储下面的数据

接下来34行 利用Object上的keys,拿到我们30行对应的key，用forEach遍历，

35行 这个看相信大家都不太懂，，35行相当于 this.$store.state.name等 ，

首先为什么要这个做，因为setup中没有this,我们必须遍历每个对象，然后给他们绑定this,

35行最后，利用bind绑定this 

然后把拿到的值存到33行定义好的对象里面 

  看到这里还不明白的话，下面给大家解释一下

...mapState(["name","age"])

这个实现的方式其实解释

this.$store.state.name

this.$store.state.age

所有我们上面需要遍历来绑定this   注意我们上面35行就是30行的mapState赋值的

 当然到这里了还是不会，没关系，我已经给大家封装好了hook 以后直接调用就OK了

 直接用

学无止境s
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
解决Vue 给mapState中定义的属性赋值报错的问题
10-15
主要介绍了解决Vue 给mapState中定义的属性赋值报错的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
VUE 3D轮播图封装实现方法
08-27
在本文中，我们将详细介绍VUE 3D轮播图封装实现方法，提供了具有参考价值的内容，包括轮播图封装实现方法的实现功能点、JS代码等。 一、轮播图封装实现方法 轮播图封装实现方法是指使用VUE框架实现的3D轮播图效果...
Vue3使用mapstate
qq_45208029的博客
12-09 3011
Vue3使用mapState
vue3.0下如何使用mapState，mapGetters和mapActions
热门推荐
qq_16139383的博客
08-26 1万+
vue3.0下如何使用mapState，mapGetters和mapActions1、新建useMapper.js2、新建useState.js3、新建useGetters.js4、新建useActions.js5、页面中使用 vue2.0中使用mapState及mapActions的方式 // 使用mapState computed: { ...mapState({ //... }) } methods: { ...mapActions(['fnA', 'fnB']) } vue3.
2024年最新VUE3 学习记录，2024年最新hashmap数据结构面试
最新发布
2401_84435838的博客
05-15 875
hooks 简单来说就是外联ts 把冗杂的ts内容(数据 函数 方法 钩子)单独存放,在需要的时候进行使用传参数的同时保留传递事件对象自定义事件常用于子给父传值子组件// 声明事件//触发haha}, 3000)}).person {父组件主页-- 给子组件Person绑定事件-->
Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
haoduoyu2099的博客
11-28 5194
Vue3 组合式(setup)关于mapState和mapGetters直接使用会因为computed中没有this而报错，故而对其重新封装，给每个mapState和mapGetters返回的每个函数都绑定一个store对象
Vue3响应式个人理解（十一）代理set和map
qq_45227934的博客
11-09 2947
文章参考了霍春阳的《Vue.js设计与实现》，是自己在阅读过程中的一些思考和理解
Vue3 setup中如何使用辅助函数mapState?
cqy980831的博客
03-16 3797
众所周知在template模板中想使用store中的变量，如下： <template> <div>{{ $store.state.name }}</div> <div>{{ $store.state.age }}</div> <div>{{ $store.state.sex }}</div> </template> 这样的写法会看起来不是很美观，所以我们就想到了使用计算属性comp
详解Vuex中mapState的具体用法
11-26
今天使用Vuex的时候遇到一个坑，也可以说是自己的无知吧，折腾了好久，终于发现自己代码的错误了。真是天雷滚滚~~~~~~ index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './...
13735495248#Vue#解析mapState源码1
07-25
mapState源码实现states:需要传入的配置对象({用户定义的变量名:state中变量名})//定义空对象res对格式化后的对象进行for循环,取出ke
vuex中如何使用mapState函数(vue2/vue3使用方法)
stay hungry, stay foolish
06-10 7793
通过...运算符进行结构，将store中的state进行映射。在template中可以直接使用，不需要通过`this.$store.state`一个个获取store中的state数据。 在vuex中可以导出改函数。
深入理解 Vue 3 响应性原理 -- Set/Map/WeakMap 函数
BG的博客
04-30 1247
介绍 接着 << 深入理解 Vue 3 响应性原理 — Proxy >> 开始了解 WeakMap、Map、Set 函数 例子 这是每个函数,在new之后,在控制台中打印的结果 set函数里边存储的是,类似数值一样的集合 map里边存的有 key, 和 value,不同的是,key 是对象类型 weakMap 存储形式和 map 一样 Set 对象允许你存储任何类型的唯一值 特点: Set对象是值的集合 按照插入的顺序迭代它的元素 Set中的元素只会出现一次,即Set中的元素是唯
Vue3.0使用Vuex之mapState与mapMutations用法
weixin_53474595的博客
05-17 925
2.新建useMutations.ts文件。1.新建useMapState.ts文件。3.store.ts文件。
vue3 实现 Map 地图区域组件封装
weixin_50450473的博客
07-17 1957
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~其中通过后台返回的数据结构，name 名称必须与下载的 json 文件的name名相等，否则会导致 单击的 data数据为空或显示不出来。坑：地图echarts版本必须在5.0.0以下，否则不能显示，此处指定安装 echarts@4.9.0 即可。将下载的 json 放至assets下的 img文件夹 中。
Vue3数据响应式原理以及依赖收集详解（含代码）+面试题如何回答Vue3响应式原理实现+Weakmap与map以及对象和数组的区别
weixin_54515240的博客
04-06 1996
Vue3实现响应式原理，面试如何回答Vue3响应式原理，什么是收集依赖，如何收集依赖和触发依赖，ES6新语法WeakMap和Map的区别
Vue3源码-Set、Map、WeakSet、WeakMap
qq_56979523的博客
01-04 1236
Set、Map、WeakSet、WeakMap 如果要用一句来描述，我们可以说Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构 那什么是集合？什么又是字典呢？ 集合 集合，是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合 字典 字典（dictionary）是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同 那么集合和字典又有什么区别呢？ 共同点：集合、字典都可以存储不重复的值 不同点：集合是以[值，值]的形式存储元素，字.
vue3-setup中使用mapState
W_Zhulin的博客
04-21 4976
vue3项目开发中，项目里会在vuex中存储一些公共的资源，方便在各个组件之间的调用，大项目中一个.vue文件中可能会用到state里面多个数据，每次都用$store.state.xxx这样写的话，代码阅读起来也不是很友好。 下面是在vue3中如何使用mapState获取到vuex中store里面的数据 最后面提供了将mapstate封装是hooks，可直接在页面中调用 vuex最新版本安装命令：npm install vuex@next store文件 import { createStore } fr
Vue3的setup语法糖中使用mapState
YDKD的博客
12-22 2944
Vue3的setup函数中如何使用mapState返回多个对象? 在Vue的组件中，要想使用Vuex中的多个State，我们经过会借助mapState辅助函数进行获取值，但是在Vue3中，通过computed的来获取多个值的方法官方并未提供，话不多说，直接上代码。 useMapState.js import { computed } from "vue"; import { mapState, useStore } from "vuex" export const useMapState = (get
mapState和computed结合在Vue3版本中的setup使用
xwnxwn的专栏
04-10 4183
引用地址：https://blog.csdn.net/qq_41308489/article/details/121534153 简单的用法: 直接用computed (不推荐） import {computed} from "vue" import {mapState, useStore} from "vuex" export default { setup() { const store = useStore() const counter = computed...
vue3 使用mapstate
05-01
Vue3 中使用 mapState 是针对 Vuex 状态管理的一种方便的方式。通过将状态器中的状态映射到组件的计算属性中，可以简化代码并提高代码的可读性。 在 Vue3 中，mapState 方法提供了两种使用方式。第一种是对象语法，可以将一个数组和对象映射到组件的计算属性中。例如： ``` import { mapState } from 'vuex' export default { computed: { ...mapState({ count: state => state.count, message: state => state.message }) } } ``` 这里将 `state.count` 映射到组件的 `count` 计算属性，将 `state.message` 映射到组件的 `message` 计算属性。这样在组件中可以直接使用这些映射的计算属性了。例如： ``` <template> <div> <p>Count: {{ count }}</p> <p>Message: {{ message }}</p> </div> </template> ``` 第二种使用方式是字符串语法，将一个数组中的状态映射到组件的计算属性中。例如： ``` import { mapState } from 'vuex' export default { computed: { ...mapState(['count', 'message']) } } ``` 这里将 `state.count` 映射到组件的 `count` 计算属性，将 `state.message` 映射到组件的 `message` 计算属性。 总之，Vue3 中使用 mapState 方法可以非常方便地将 Vuex 状态管理的状态映射到组件中的计算属性中。这样可以提高代码的可读性，降低代码的复杂度，提高开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学无止境s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值