详解vuex中mapState,mapGetters,mapMutations,mapActions的作用


Posted in Javascript onApril 13, 2018

在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了。。。特别是官方的文档并没有给除详细的说明跟例子。。。然后就自己慢慢理解了一下。其实也就是一个重命名而已。。。以下就是例子,希望能帮助理解:

在store中代码 

import Vuex from 'vuex' 
import Vue from 'vue' 
Vue.use(Vuex); 
const store = new Vuex.Store({ 
 state: { 
  count: 10, 
  numb: 10086 
 }, 
 getters: { 
  add: (state, getter) => { 
   state.count = getter.add; 
   return state.count; 
  }, 
 }, 
 mutations: { 
  increment(state,){ 
    state.count += 2; 
  }, 
 }, 
 actions: { 
  actionA({ dispatch, commit }) { 
   return commit('add'); 
  }, 
 } 
});

export default store; 

在调用的模块里面的代码如下:

<template> 
 <div class="hello"> 
  <button @click="increment">加{{count}}</button> 
 </div> 
</template> 
<script> 
 import {mapState,mapActions} from 'vuex' 
 export default { 
  name: 'hello', 
  data () { 
   return { 
    msg: 'Welcome to Your Vue.js App' 
   } 
  }, 
  methods:{ 
   increment(){ 
    this.$store.dispatch('incrementsync').then(() => { 
     console.log('then'); 
    }); 
   } 
  }, 
  computed: mapState({ // mapState相当于映射 
    count: 'numb', //这个时候count应该等于多少?!! 是等于store文件里面的count呢还是等于numb?答案是等于numb!这边的意思是mapState把'numb'的值映射给了count,所以count等于10086 
  }) 
 } 
</script>

这个时候按钮应该显示加10还是显示加10086?答案是加10086,所以map其实就是一个在store文件中的映射而已,就是不用让你要调用一个值需要敲这么多代码:this.$state.count;而只需要用count。。。

界面效果:

详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

好了,其他的mapAction,mapMutations的原理是一样样的。

总结

以上所述是小编给大家介绍的详解vuex中mapState,mapGetters,mapMutations,mapActions的作用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
Vue Element plus使用方法梳理
Dec 24 Vue.js
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 #Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 #Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 #Javascript
Vue2.0 实现单选互斥的方法
Apr 13 #Javascript
Vue render深入开发讲解
Apr 13 #Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 #Javascript
vue组件的写法汇总
Apr 12 #Javascript
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
apache php mysql开发环境安装教程
2016/07/28 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
event.srcElement+表格应用
2006/08/29 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
Angular路由简单学习
2016/12/26 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python的Flask框架的简介和安装方法
2015/11/13 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
python实现文字版扫雷
2020/04/24 Python
python退出循环的方法
2020/06/18 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
上学迟到的检讨书
2014/01/11 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
JS class语法糖的深入剖析
2022/07/07 Javascript