详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
时间:2019-04-14
本文章向大家介绍详解vuex中mapState,mapGetters,mapMutations,mapActions的作用,主要包括详解vuex中mapState,mapGetters,mapMutations,mapActions的作用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在开始接触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。。。
界面效果:
好了,其他的mapAction,mapMutations的原理是一样样的。
总结
以上所述是小编给大家介绍的详解vuex中mapState,mapGetters,mapMutations,mapActions的作用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Memcached 命令执行漏洞(CVE-2016-8704、CVE-2016-8705、CVE-2016-8706)简析
- 使用Hue创建Ssh的Oozie工作流时重定向输出日志报错分析
- Joomla未授权创建特权用户漏洞(CVE-2016-8869)分析
- 检测本地文件躲避安全分析
- 如何在Kerberos的Linux上安装及配置Impala的ODBC驱动
- 对抗静态分析——so文件的加密
- Bypass unsafe-inline mode CSP
- Joomla未授权创建用户漏洞(CVE-2016-8870)分析
- 如何将HDFS文件系统挂载到Linux本地文件系统
- 使用 XML 内部实体绕过 Chrome 和 IE 的 XSS 过滤器
- 响应式编程的实践
- S2-045 原理初步分析(CVE-2017-5638)
- 如何在HDFS上查看YARN历史作业运行日志
- 面向流的设计思想
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 花十分钟的时间武装你的代码库
- 对HTML-input的一些思考和理解
- 【投稿】刀哥:Rust学习笔记 1
- 【Rust日报】2020-08-13 关于群集(Bevy)引擎ECS框架中system的语法糖是怎么实现的
- 最新情报:所有的递归都可以改写成非递归?
- 算法篇:树之转换为二叉搜索树
- 算法篇:树之倒数k个节点
- 揭开链表的真面目
- Coder,我怀疑你并不会枚举
- 掌握坐标轴的log转换
- 连通域的原理与Python实现
- 涨见识!Java String转int还有这种写法
- RTSP拉流协议视频平台EasyNVR能够接入多少路视频直播流?
- 安装allure后执行命令后报错 INTERNALERROR> AttributeError: module 'pytest' has no attribute 'allure'
- 太好玩了,爬虫、部署API、加小程序,一条龙玩转知乎热榜