mapState的实现
首先,vuex暴露的就是这些接口,export default {Store, install, mapState, mapMutations, mapGetters, mapActions,createNamespacedHelpers} ,看看mapState的实现方式
1.mapState源码中,有一个函数normalizeMap,它的源码如下
function normalizeMap (map) {
return Array.isArray(map)? map.map(key => ({key,val:key})) : Object.keys(map).map(key => ({key,val:map[key]}))
}
这个函数实现方式比较简单,通过判断参数map是数组还是对象,按照不同的格式输出。
例如数组输入:
normalizeMap([‘one’,‘two’]) 输出结果为
[
{key:‘one’,val:‘one’},
{key:‘two’,val:‘two’}
]
对象传入:
normalizeMap({
count: state => state.count,
countAlias: ‘count’
})
输出结果为:
[
{
key:state,
val:state => state.count
},
{
key:countAlias,
val:‘count’
}
]
2.弄清楚了normalizeMap方法,再来看看mapState方法
export function mapState(state) {
const res = {};
normalizeMap(state).forEach(({key, val}) => {
res[key] = function mappedState(){
return typeof val === ‘function’?
val.call(this, this.store.state,this.store.state, this.store.state,this.store.getters):this.KaTeX parse error: Expected 'EOF', got '}' at position 22: …state[val] }̲ }) return …store.state[val]
例如:
import {mapState} from 'vuex
const state = {
count:0
}/
省略vuex的配置
/
export default{
data() {
return {
localCount:10
}
}
},
computed: mapState({
countLocalValue (state) {
return state.count + this.localCount
}
})
经过normalizeMap方法后,返回的数组为
[
{
key:‘countLocalValue’,
val:function(state) {
return state.count + this.localCount
}
}
]
再经过mapState,返回res,最终return出来的结果是:
computed:{
countLocalValue:function mappedState(){
return this.$store.state.count + this.localCount
}
}
这不就是我们的计算属性的写法吗?现在终于清楚了mapState的处理方法,顺便把mapMutations,mapActions看了下,差不多。说到根本上,就是一个语法糖。
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 ...
最新文章
- Win64 驱动内核编程-13.回调监控模块加载
- contourArea函数
- python如何读取excel的一个sheet_python pandas是如何读取excel表中的sheet的(四)
- 百度为什么发现不了旗下网站的恶意代码?
- redis存储的数据类型
- HALCON示例程序measure_ring.hdev齿轮齿宽度测量
- linux中文本查找命令,Linux常用的文本查找命令 find
- 软件工程测试旅游管理系统,旅游管理系统的设计与实现
- abaqus质量缩放系数取值_ABAQUS-延性损伤模型模拟金属材料断裂
- 从skyeye学习arm(开篇)
- 如何学习嵌入式Linux_韦东山
- Dubbo Remoting模块详解
- Java实现微信聊天记录生成器
- 移动光猫路由改桥接降低延时初尝试
- 高德地图开发 —— 获取高德地图开发的 key
- 蓝旭暑期培训——DOM事件+正则表达式
- Android工程师进阶第五课 多线程锁,线程池和DVM/ART优化
- 大航海时代: 流行5掠夺篇
- 太赞了!图解SQL基础知识,菜鸟也能看懂的SQL文章!
- 康奈尔大学计算机硕士要求,申请康奈尔大学计算机硕士需要什么条件呢