关于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 ...
随机推荐
- XMU 1071 圣斗士黄金十二宫(七)银河星爆 【计算几何】
1071: 圣斗士黄金十二宫(七)银河星爆 Time Limit: 500 MS Memory Limit: 64 MBSubmit: 193 Solved: 10[Submit][Status] ...
- caioj1271&&poj3071: 概率期望值2:足球
见到网上的大佬们都用了位运算..表示看不懂就自己想了,还挺好想的(然而我不会告诉你我因为p的数组问题卡了半小时顺便D了ZZZ大佬的数据) DP方程(伪)就是:第t轮第i个队晋级的可能=第t-1轮第i个 ...
- Java抽象类和接口的区别(好长时间没看这种文章了)
Java抽象类和接口的区别(好长时间没看这种文章了) abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的 ...
- mac toad下建表问题
mac toad下创建表,表名会自动多一个双引号,如:tb_test => "tb_test",这个应该是mac系统智能引号问题导致的,目前还没找到解决办法,只能手动用sql ...
- python库学习笔记——BeautifulSoup处理子标签、后代标签、兄弟标签和父标签
首先,我们来看一个简单的网页https://www.pythonscraping.com/pages/page3.html,打开后: 右键"检查"(谷歌浏览器)查看元素: 用导航树 ...
- 实现的是Linux和Windows之间的一种共享--samba
samba 基本配置及自定义控制 https://www.cnblogs.com/l-hh/p/9473937.html Samba简介: Samba实现的是Linux和Windows之间的一种共享, ...
- 循环冗余检验 (CRC) 算法原理
Cyclic Redundancy Check循环冗余检验,是基于数据计算一组效验码,用于核对数据传输过程中是否被更改或传输错误. 算法原理 假设数据传输过程中需要发送15位的二进制信息g=10100 ...
- 杂项-Java-百科:jar
ylbtech-杂项-Java-百科:jar 在软件领域,JAR文件(Java归档,英语:Java ARchive)是一种软件包文件格式,通常用于聚合大量的Java类文件.相关的元数据和资源(文本.图 ...
- [POI2008]激光发射器SZK
Description 多边形相邻边垂直,边长为整数,边平行坐标轴.要在多边形的点上放一些激光发射器和接收器.满足下列要求: 1发射器和接收器不能放置在同一点: 2发射器发出激光可以沿壁反射,最终到达 ...
- hdu 4565 So Easy! (共轭构造+矩阵快速幂)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4565 题目大意: 给出a,b,n,m,求出的值, 解题思路: 因为题目中出现了开根号,和向上取整后求 ...