Vuex状态管理-mapState的基本用法详细介绍 - CSDN博客

mapState()函数的返回结果是一个对象。

但有一个问题，当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。

比如上面的name(),count(),nameAlias(),显得重复，代码冗长。

为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键 mapState接收一个对象 mapState函数的可以接受一个对象Object。

对象中可以包含字符串或函数。

mapState()函数的返回结果是一个对象。

我们继续看上面的mapState函数 computed:mapState({ count:'count',//string映射this.count为store.state.count的值 //箭头函数可使代码更简练 name:(state)=>state.name,//function映射this.name为store.state.name的值 nameAlias:'name',//string映射this.nameAlias为store.state.name的值 countplustempcount:function(state){//用普通函数this指向vue实例,但是在箭头函数中this就不是指向vue实例了，所以这里必须用普通哈数 returnthis.tempcount+state.count }, countplustempcount2(state){ returnthis.tempcount2+state.count } }) 上面mapState()函数接收了一个对象。

对象的第一个属性是string类型的，count:'count',这条语句映射出了this.count，值等于store.state.count的值。

对象的第二个属性是一个箭头函数，name:(state)=>state.name,，映射this.name为store.state.name的值。

对象的第三个属性是一个string类型，nameAlias:'name'，映射this.nameAlias为store.state.name的值，和第一个属性的用法本质是一致的，不过这里映射出的计算属性的名称与state的子节点名称不同。

对象的第四个属性是一个普通函数，普通函数和箭头函数的不同之处在于，普通函数中的this指向了vue实例，因为可以访问到当前组件的局部状态，比如this.tempcount。

对象的第五个属性是一个普通函数，第五个和第四个的用法本质是一样的，只不过第五个用了ES6中对象的简化写法。

上面的mapState函数的返回值是一个对象，我们可以看作是这样的 computed: {//这个对象就是mapState的返回值 count(){ returnthis.$store.state.count }, name(){ returnthis.$store.state.name } nameAlias(){ returnthis.$store.state.name } countplustempcount:function(state){ returnthis.tempcount+this.$store.state.count }, countplustempcount2(state){ returnthis.tempcount2+this.$store.state.count } } 把这个对象赋值给computed不就和原始的写法一样了吗，所以mapState起到了简化的作用。

但是我们可以发现比起直接给computed赋值，这里少了tempCountPlusTempCount2这个计算属性。

tempCountPlusTempCount2不是有vuex状态计算而来的，是根据组件内的局部状态计算来的。

mapState函数结合对象的扩展运算符运算符使用 对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

为什么要用扩展运算符呢，我们观察到上面直接将mapState函数的返回值赋给computed对象的话，那么computed中就只有对vuex状态的获取，而没有了当前组件的局部状态，比如tempCountPlusTempCount2就没地方放了，所以我们用扩展运算符。

letz={a:3,b:4}; letn={...z};//对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中 n//{a:3,b:4} 所以利用扩展运算符将下面mapState函数的返回值对象 computed:{ ...mapState({ count:'count',//string映射this.count为store.state.count的值 //箭头函数可使代码更简练 name:(state)=>state.name,//function映射this.name为store.state.name的值 nameAlias:'name',//string映射this.nameAlias为store.state.name的值 countplustempcount:function(state){//用普通函数this指向vue实例,但是在箭头函数中this就不是指向vue实例了，所以这里必须用普通哈数 returnthis.tempcount+state.count }, countplustempcount2(state){ returnthis.tempcount2+state.count } }) } 上面的结果 computed:{ count(){ returnthis.$store.state.count }, name(){ returnthis.$store.state.name } nameAlias(){ returnthis.$store.state.name } countplustempcount:function(state){ returnthis.tempcount+this.$store.state.count }, countplustempcount2(state){ returnthis.tempcount2+this.$store.state.count } } 于是可以将组将内的计算属性和获取vuex状态的计算属性写在一起了。

computed:{ tempCountPlusTempCount2(){ returnthis.tempcount+this.tempcount2 }, ...mapState({ count:'count',//string映射this.count为store.state.count的值 //箭头函数可使代码更简练 name:(state)=>state.name,//function映射this.name为store.state.name的值 nameAlias:'name',//string映射this.nameAlias为store.state.name的值 countplustempcount:function(state){//用普通函数this指向vue实例,但是在箭头函数中this就不是指向vue实例了，所以这里必须用普通哈数 returnthis.tempcount+state.count }, countplustempcount2(state){ returnthis.tempcount2+state.count } }) } 这就是mapState的基本用法。

mapState函数接受一个数组 当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组。

computed:mapState([ //映射this.count为store.state.count 'count', 'name' ]) 上面的写法可以看作 computed:{ count(){ returnthis.$store.state.count }, name(){ returnthis.$store.state.name } } 最终版的mapState computed:{ tempCountPlusTempCount2(){ returnthis.tempcount+this.tempcount2 }, ...mapState(['count','name']), ...mapState({ nameAlias:'name',//string映射this.nameAlias为store.state.name的值 countplustempcount:function(state){//用普通函数this指向vue实例,但是在箭头函数中this就不是指向vue实例了，所以这里必须用普通哈数 returnthis.tempcount+state.count }, countplustempcount2(state){ returnthis.tempcount2+state.count } }) } 夏阳满山2333 关注 关注 23 点赞 踩 1 评论 49 收藏 打赏 扫一扫，分享内容 点击复制链接 专栏目录 vuex中...mapMutations、...mapState模块化写法以后的调用方法 轻风细雨_林木木 11-03 616 一、…mapMutations中调用模块中的方法 里面的方法： constmutations={//修改状态 /** *@param{Object}statevuex默认值 *@param{Object}data通过接口获取值 *@param{Object}data2通过接口获取值 */ updataAction(state,data,data2){ console.log(state,'111111') cons 详解Vuex中mapState的具体用法 08-29 本篇文章主要介绍了详解Vuex中mapState的具体用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一起跟随小编过来看看吧 评论 1 您还未登录，请先 登录 后发表或查看评论 Vuex中mapState的用法 weixin_30708329的博客 05-04 305 今天使用Vuex的时候遇到一个坑，也可以说是自己的无知吧，折腾了好久，终于发现自己代码的错误了。

真是天雷滚滚~~~~~~ index.js importVuefrom'vue' importVuexfrom'vuex' importmutationsfrom'./mutations' importactionsfrom'./action' impo... vuex：弄懂mapState、mapGetters、mapMutations、mapActions u010227042的博客 06-17 425 vuex进阶 一、state 1.1引入vuex以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 importVuefrom'vue' importVuexfrom'vuex' Vue.use(Vuex) exportdefaultnewVuex.Store({ state:{//存放状态 nickname:'Simba', age:20, gender:'男' }, mutations:{}, vuex sqrtsix的博客 10-26 352 Vuex中mapState的用法importVuefrom'vue' importVuexfrom'vuex' importmutationsfrom'./mutations' importactionsfrom'./action' importgettersfrom'./getters'Vue.use(Vuex)conststate={ userInfo Vuex入门（2）——state,mapState,...mapState对象展开符详解 热门推荐 我不是水哥 08-30 27万+ 上一章大概说明了vuex的设计初衷和基本用法,从这一章开始详解一下vuex的几个关键配置. 1.state state是什么? 定义:state(vuex)≈data(vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新. 虽然... mapState的使用（常用） weixin_42508745的博客 03-30 1957 mapState作用：可以辅助获取到多个state的值 怎么使用？ 1.在.vue组件中引入,在js块中引入 import{mapState}from'vuex' 2.在.vue组件中computed下定义一个对象 computed：{ ...mapState([//mapState本是一个函数，在里面写一个数组，记得加... ‘num’，//存的数据 ‘id’ ]... vuex中mapState用法解析 最新发布 老电影故事的博客 12-10 933 一、state state是什么? 定义:state(vuex)≈data(vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新. 虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.如果你用data去接收$store.state,当然可以接收到值,但由 vuexstate及mapState的基础用法详解 08-27 主要介绍了vuexstate及mapState的基础用法详解,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友跟随 mapState辅助函数以及mapState是什么? qq_34246965的博客 07-18 904 表面意思: mapState是state的辅助函数.这么说可能很难理解 抽象形容: mapState是state的语法糖,这么说可能你还想骂我,因为你根本不了解什么叫做语法糖,事实上我说的语法糖有自己的定义,什么是语法糖?我对语法糖的理解就是,用之前觉得,我明明已经对一种操作很熟练了,并且这种操作也不存在什么问题,为什么要用所谓的"更好的操作",用了一段时间后,真香! 实际作用: 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。

为了解决这个问题，我们可以使用mapState辅 ...mapState和...mapMutations通俗解析运用 qq_34246965的博客 07-15 451 1.首先要知道在vuex里面，state里面是存放数据的（类似于vue里面的data），mutations里面存放的是各种函数方法，用来改变state里面的数据的方法。

比如： importVuefrom"vue"; importVuexfrom"vuex"; Vue.use(Vuex); exportdefaultnewVuex.Store({ state:{ leftFocus:'', hasBg:'', load Vuex入门——mapState，...mapState对象展开符详解 weixin_54187299的博客 05-06 572 1、mapState辅助函数 mapState是什么? 表面意思:mapState是state的辅助函数.这么说可能很难理解 抽象形容:mapState是state的语法糖,这么说可能你还想骂我,因为你根本不了解什么叫做语法糖,事实上我说的语法糖有自己的定义,什么是语法糖?我对语法糖的理解就是,用之前觉得,我明明已经对一种操作很熟练了,并且这种操作也不存在什么问题,为什么要用所谓的"更好的操作",用了一段时间后,真香 实际作用:当一个组件需要获取多个状态时候，将这些状态都... mapState（辅助函数） weixin_44195250的博客 07-31 922 状态管理分为三部分：state、view、actions。

整个vuex核心是store，vuex的状态是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。

不能直接更改store中的状态，改变store中的状态的唯一途径就是显式地提交(commit)mutation。

state：从store实例中读取... vuex中关于mapState的作用 weixin_33739523的博客 10-05 701 辅助函数 Vuex除了提供我们Store对象外，还对外提供了一系列的辅助函数，方便我们在代码中使用Vuex，提供了操作store的各种属性的一系列语法糖，下面我们来一起看一下： mapState 　　mapState工具函数会将store中的state映射到局部计算属性中。

为了更好理解它的实现，先来看一下它的使用示例： //vuex提供了独立的构建工具函数 Vuex.m... Vuex的使用（三）——mapState的定义和用法 讨厌走开啦 09-06 246 参考文档：https://vuex.vuejs.org/zh/guide/ 当需要在组件中使用多个state时，可以利用mapState批量生成计算属性 mapState的实现 逆风的蔷薇 12-27 179 首先，vuex暴露的就是这些接口，exportdefault{Store,install,mapState,mapMutations,mapGetters,mapActions，createNamespacedHelpers},看看mapState的实现方式 1.mapState源码中，有一个函数normalizeMap,它的源码如下 functionnormalizeMap(map){ returnArray.isArray(map)?map.map(key=>({ke vuex中辅助函数mapState的基本用法详解 追风少年的博客 07-15 399 vuex中辅助函数mapState的基本用法详解 1、在src/store/index.js中，引入vuex以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 importVuefrom'vue' importVuexfrom'vuex' Vue.use(Vuex) exportdefaultnewVuex.Store({ state:{ mainSize:{/*width:"84%",*/left:290+'px'/ mapState的使用 edisonlee的博客 03-01 819 如果要获取store里面的state的city属性。

首先来看看没有使用mapState的情况, {{this.$store.state.city}} 再来看看使用mapState后 {{this.city}} 那么为什么会这样呢？先来看看官方的定义：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。

为了解决这个问题，我们可以使用mapSta... ©️2022CSDN 皮肤主题：大白 设计师：CSDN官方博客 返回首页 夏阳满山2333 CSDN认证博客专家 CSDN认证企业博客 码龄4年 暂无认证 27 原创 16万+ 周排名 8万+ 总排名 3万+ 访问 等级 537 积分 23 粉丝 62 获赞 33 评论 165 收藏 私信 关注 热门文章 [ES6]Promise.then()使用小结 16179 Vuex状态管理-mapState的基本用法详细介绍 9499 element-ui的隐藏组件el-scrollbar的使用(解决原生滚动条没有隐藏的问题高宽设置) 3207 Element-UI表单校验注意规则，表单嵌套时的校验(form中嵌套form) 2188 [Vue]父组件明明按照正确的绑定方式更新了传递给子组件的prop属性子组件却没有及时更新。

解决方案：key值nextTickwatch监听。

1146 分类专栏 Webpack 1篇 Vue 7篇 Javascript 10篇 CSS 8篇 ES6 3篇 Vue源码阅读 1篇 JS常见笔试题 1篇 Element-UI 3篇 eslint 1篇 vscode 1篇 ES2017 1篇 jQuery 最新评论 [CSS]什么是CSS盒模型块级盒子和内联盒子的区别 大鱼海棠-愚者: 写的很详细，赞赞 [Vue]父组件明明按照正确的绑定方式更新了传递给子组件的prop属性子组件却没有及时更新。

解决方案：key值nextTickwatch监听。

qq_35374384: 第一种方案虽然能改变值，但没有重新刷新页面。

第三种方案好用，我就是用这个实现了菜单动态刷新。

谢谢楼主！ element-ui的隐藏组件el-scrollbar的使用(解决原生滚动条没有隐藏的问题高宽设置) Gaays: 这个问题在最新的element-ui官网也能看到,一直缩放,效果最好的是33%缩放时,能很清楚的看到原生的滚动条,最新版edge和chrome都可以复现,不过网上已有解决方法了,可以搜搜看 Vuex状态管理-mapState的基本用法详细介绍 weixin_45795054: 不知道文章是不是原创的，但是我看懂了，谢谢陌生人 element-ui的隐藏组件el-scrollbar的使用(解决原生滚动条没有隐藏的问题高宽设置) 夏阳满山2333: 我这样设置后浏览器缩放不会导致出现原生滚动条，你F12看哈为啥没有遮住 您愿意向朋友推荐“博客详情页”吗？ 强烈不推荐 不推荐 一般般 推荐 强烈推荐 提交 最新文章 [Vue脚手架项目]通过ProvidePlugin实现loadash的全局按需导入 [JavaScript]轮播图利用原生js的setTimeout结合CSS3的过渡transition实现轮播图的无缝滚动 [Vue]父组件明明按照正确的绑定方式更新了传递给子组件的prop属性子组件却没有及时更新。

解决方案：key值nextTickwatch监听。

2021年13篇 2020年14篇 目录 目录 分类专栏 Webpack 1篇 Vue 7篇 Javascript 10篇 CSS 8篇 ES6 3篇 Vue源码阅读 1篇 JS常见笔试题 1篇 Element-UI 3篇 eslint 1篇 vscode 1篇 ES2017 1篇 jQuery 目录 打赏作者 夏阳满山2333 你的鼓励将是我创作的最大动力 ¥2 ¥4 ¥6 ¥10 ¥20 输入1-500的整数 余额支付 (余额：--) 扫码支付 扫码支付：¥2 获取中 扫码支付 您的余额不足，请更换扫码支付或充值 打赏作者 实付元 使用余额支付 点击重新获取 扫码支付 钱包余额 0 抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。

2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值