关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState
一、通过mapState函数的对象参数来赋值:
<p>{{ count }}</p>
<p>{{ count1 }}</p>
<p>{{ count2 }}<p>
//导入
import { mapState } from 'vuex'
export default {
data() {
return {
msg: 'vuex理解要点',
id: 1
}
},
store,
//方法二:通过mapState对象来赋值
computed: mapState({
//使用箭头函数
count: state => state.count,
//传入字符串 ‘count’ 等同于 `state => state.count`
count1: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
count2(state) {
return state.count + this.id
}
})
}
三、通过mapState函数的数组参数来赋值
当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
// 映射 this.count 为 store.state.count
computed:mapState(['count'])
关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState的更多相关文章
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(四)-----mapActions
介绍mapActions辅助函数: Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的:Action是支持异步操作的,而Mut ...
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(二)-----mapMutations
在组件中提交Mutations: import { mapState, mapMutations } from 'vuex' export default { data() { return { ms ...
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(三)-----mapGetters
简单的理解: const getters = { newCount: function(state){ return state.count += 5; } } ------------------- ...
- vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用
一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: index.js如下: import Vue from 'vue'; import ...
- vuex mapState、mapGetters、mapActions、mapMutations的使用
例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...
- Veux mapState、mapGetters、mapActions、mapMutations && Vuex命名空间
1 # 一.四个map方法的使用 2 # 1.mapState方法:用于帮助我们映射state中的数据为计算属性 3 computed:{ 4 // sum(){ 5 // return this.$ ...
- vuex中mapState、mapMutations、mapAction的理解
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性. // 在单独构建的版本中辅助函数为 Vue ...
- vuex学习与实践——mapState、getter、mapGetters
1.mapState辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键 ...
- vuex状态管理demo
vuex状态管理主要包含四个概念 mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...
随机推荐
- while语句字符串的基本操作
1,编码:对现在通用文字编码成计算机文字,便于储存,传递,交流. 最早的计算机编码是ACSII美国人创建的,包含英文字母,数字,以及特殊符号.总共是128个码位:2**7,因为计算机的底层只能识别:& ...
- make eval builtin function
1 eval的返回值是空字符串,因此它可以用于Makefile的任何位置而不引起错误 2 eval函数的作用效果 生成Makefile的动态部分,即eval用于增加Makefile的构成部分. 也就是 ...
- HDU1087 Super Jumping! Jumping! Jumping! —— DP
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1087 Super Jumping! Jumping! Jumping! Time Limi ...
- YTU 2953: A代码填充--学画画
2953: A代码填充--学画画 时间限制: 1 Sec 内存限制: 128 MB 提交: 62 解决: 52 题目描述 最近小平迷上了画画,经过琨姐的指导,他学会了RGB色彩的混合方法.对于两种 ...
- ionic 和cordova的区别是什么
很多新朋友ionic基础教程都学完了,还是不知道ionic 和cordova 是什么关系 ionic是什么: Ionic(ionicframework)一款开源的Html5移动App开发框架,是Ang ...
- 【OpenFOAM】——OpenFOAM入门算例学习
1 明确目标——为啥费老大劲儿学习OpenFOAM 学习OpenFOAM主要出于课题需要,希望实现以下几个目标: l [ ]学会用SnappyHexMesh生成高质量网格: l [ ]学习使用O ...
- .NET修改配置文件
首先说明,本文参考了这个帖子http://www.cnblogs.com/henw/archive/2012/01/31/2333783.html,进行了一些补充 简要说来两种方法,一是把config ...
- 超强XSS攻击利器
======================================================================= BackTrack 5 R1 XSS研究之XSSer(超 ...
- E20180228-hm-xa
bounds n. 界限; 界限; 出界; 在(某人允许进入的)界限以外; 出格的; 跳跃( bound的名词复数 ); (球等的) 反跳; indice n. 指数(指指标, 如健康指数的指数); ...
- 【原创】CentOS 6.5 中安装 Mysql 5.6,并远程连接Mysql
ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.在安装CentOS时,若选择的是Basic Server(可支持J2EE开发),则新安装好的CentOS系统中默认是已经安装了一个mysq ...