详解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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
vue实现简单loading进度条
Jun 06 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
taro开发微信小程序的实践
May 21 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
PHP实现简易图形计算器
2020/08/28 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
详解Python中的array数组模块相关使用
2016/07/05 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
Python如何重新加载模块
2020/07/29 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
大学生职业生涯规划范文
2014/01/08 职场文书
高中生物教学反思
2014/02/05 职场文书
春节晚会主持词
2014/03/24 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
环保宣传标语
2014/06/12 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
nginx部署多前端项目的几种方法
2021/05/25 Servers