mapState的使用
如果要获取store里面的state的city属性。首先来看看没有使用mapState的情况,
{{this.$store.state.city}}
再来看看使用mapState后
{{this.city}}
那么为什么会这样呢?先来看看官方的定义:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键:
首先什么是状态?即state,state又是用来存储一些数据的,所以不难理解。
看代码
import {mapState} from "vuex"
// 使用mapState,此时,city已经被映射了,所以可以直接使用this.city去获取属性值
computed:{//意思是将vuex中的city数据映射到组件的computed属性里...mapState(["city"])
}
还有一种使用方法,意思是将store里面的state里面的city属性映射到computed属性中的currentCity中。即currentCity代表了$store.state.city
computed:{...mapState({currentCity:"city"})}
mapState的使用相关推荐
- Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex 什么时候需要使用? 状态(数据)共享! vuex工作原理 搭建vuex环境 创建文件 src/store/index.js//全局安装[--save生产环境] npm install -g ...
- Vuex——使用namespace的store使用mapState获取state为undefined
问题描述 使用namespace的store使用mapState获取state为undefined 解决方案 1....mapState中基于属性的访问 ...mapState({searchInpu ...
- [转] Vuex入门(2)—— state,mapState,...mapState对象展开符详解
1.state state是什么? 定义:state(vuex) ≈ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂 ...
- vue——vuex mapState,mapGetters,mapMutations,mapActions
当多次获取state中的数据时会出现大量的 $store.state.属性名 造成代码的冗余同时也很麻烦.就可使用 mapState(引用时使用的名称,'state中的属性名') 或 mapState ...
- vuex:弄懂mapState、mapGetters、mapMutations、mapActions
转载地址:https://zhuanlan.zhihu.com/p/100941659 vuex进阶 一.state 1.1 引入vuex 以后,我们需要在state中定义变量,类似于vue中的dat ...
- 【Flink】Flink 实时去重方案 四种方案 MapState 、SQL方式、HyperLogLog、Bitmap
文章目录 1.概述 2.MapState 方式去重 2.1 实现步骤分析 2.2 实现流程 2.3 主流程 2.4 去重逻辑 3.SQL 方式去重 4.HyperLogLog 方式去重 5.Bitma ...
- [vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
- 2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
- vuex---$store案例、getters配置项、引入mapState、mapGettes、mapActions、mapMutations
目录 vuex流程图 安装vuex 搭建vuex环境 一.使用vuex编写求和案例 main.js src/store/index.js Count.vue 效果图 二.getters配置项 三.引入 ...
- vue3.0下如何使用mapState,mapGetters和mapActions
vue3.0下如何使用mapState,mapGetters和mapActions 1.新建useMapper.js 2.新建useState.js 3.新建useGetters.js 4.新建use ...
最新文章
- U盘中的autorun.inf
- 【优化SQL Server循环更新、插入耗时长的问题】
- 计算机网络 --- 数据链路层CSMA协议
- 字符串处理 —— 最大最小表示法
- SQL Server误区30日谈-Day25-有关填充因子的误区
- 软件测试 测试用例笔记
- 阿里云周明:因云而生的基础设施
- A Surface Defect Detection Method Based on Positive Samples
- 1553B 调试记录
- 姜小白的python日记Day3 初识模块与数据运算
- windows下安装与使用pix2tex(mathpix免费替代版)
- oslo.messaging库
- Shiro视频-佟刚-专题视频课程
- 启动计算机引导win10,图文详解win10系统电脑开机引导错误的方案
- python语言编程-Python成为2018年度编程语言,遥遥领先于其他语言
- bzoj 1539 [POI2005]Dwu-Double-row 建图+思路
- ie8与ie9的区别
- Wpf使用Behaviors包
- 三调 图斑地类面积_收藏 | “三调数据”与国土空间规划用地对接的70个技术问题...
- matlab 小波功率谱,小波变换后的各频率分量的功率谱,
热门文章
- 【思维导图】Python基础语法——知识点总结
- NetBSD IPv6环境建立
- EXCEL-SQL学习笔记——INT和FIX函数
- 自相关ACF与偏自相关PACF
- MySQL——删除语句
- 让外拍更出色 美图秀秀打造紫色LOMO风
- 虚拟串口仿真:Internal Exception: access violation in module ‘DSIM.DLL‘ [00002C82].
- java 算术取舍RoundingMode
- 数字化“虚拟电厂”,精准管控助推节能减碳(一)
- 使用PHP实现冒泡排序