详解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 预解析
Oct 25 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
JS数组的常用方法整理
Mar 31 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
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP chop()函数讲解
2019/02/11 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
python 队列详解及实例代码
2016/10/18 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Python 没有main函数的原因
2020/07/10 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
长辈证婚人证婚词
2014/01/09 职场文书
母婴店促销方案
2014/03/05 职场文书
学生安全责任书
2014/04/15 职场文书
关于安全的演讲稿
2014/05/09 职场文书
飞屋环游记观后感
2015/06/08 职场文书
付款证明模板
2015/06/19 职场文书
工作服管理制度范本
2015/08/06 职场文书
2016猴年春节问候语
2015/11/11 职场文书