详解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 相关文章推荐
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
java必学必会之static关键字
Dec 03 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
浅谈js中的this问题
Aug 31 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
vue实现点击追加选中样式效果
Nov 01 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
header()函数使用说明
2006/11/23 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
利用aardio给python编写图形界面
2017/08/21 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
心理学培训心得体会
2016/01/22 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript