详解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 相关文章推荐
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
Angular.JS中的this指向详解
May 17 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
vue实现PC端分辨率适配操作
Aug 03 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读取MySQL数据代码
2008/06/05 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
jQuery使用方法
2017/02/04 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python3中rank函数的用法
2019/11/27 Python
python机器学习库xgboost的使用
2020/01/20 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
给同事的道歉信
2014/01/11 职场文书
司法建议书范文
2014/05/13 职场文书
员工安全生产承诺书
2014/05/22 职场文书
全国文明单位申报材料
2014/05/31 职场文书
机电专业求职信
2014/06/14 职场文书
受资助学生感谢信
2015/01/21 职场文书
大学学生个人总结
2015/02/15 职场文书
村主任当选感言
2015/08/01 职场文书
门面租赁合同范文
2019/08/06 职场文书
MySQL 数据类型详情
2021/11/11 MySQL