详解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调试工具(下载)
Jan 09 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
使用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
菜鸟修复电子管记
2021/03/02 无线电
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
offsetParent 算法分析
2010/04/05 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
js a标签点击事件
2017/03/30 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
深入理解python中的select模块
2017/04/23 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
测绘工程专业求职信
2014/07/15 职场文书
食品质检员岗位职责
2015/04/08 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书