关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(二)-----mapMutations
在组件中提交Mutations:
import { mapState, mapMutations } from 'vuex'
export default {
data() {
return {
msg: "vuex要点"
}
},
store,
computed: mapState([
'count'
]),
// methods: mapMutations([
// 'add', 'reduce'
// ]),
//或者
methods: {
//如果组件中事件的名称和mutations中方法的名称相同,可以传一个字符串数组
...mapMutations([
'add' //映射 this.add() 为 this.$store.commit('add')
]),
//组件中的事件名和mutations中的方法名不一样,传入对象
...mapMutations({
reduces: 'reduce' //映射 $this.reduces 为 this.store.commit('reduce')
})
}
}
Mutations必须是同步函数!!!
关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(二)-----mapMutations的更多相关文章
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(四)-----mapActions
介绍mapActions辅助函数: Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的:Action是支持异步操作的,而Mut ...
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(三)-----mapGetters
简单的理解: const getters = { newCount: function(state){ return state.count += 5; } } ------------------- ...
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState
一.通过mapState函数的对象参数来赋值: <p>{{ count }}</p> <p>{{ count1 }}</p> <p>{{ c ...
- 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、getter、mapGetters
1.mapState辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键 ...
- vuex状态管理demo
vuex状态管理主要包含四个概念 mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...
- vue使用--vuex快速学习与使用
什么是vuex? Vuex核心概念 Vuex安装与使用 1.安装 2.目录结构与vuex引入 3.store中变量的定义.管理.派生(getter) 4.vuex辅助函数的使用说明 Vuex刷新数据丢 ...
随机推荐
- 2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016) D.Dinner Bet 概率DP+排列组合
题目链接:点这里 题意: 1~N标号的球 现在A有C个,B有C个 每次可以随机得到D个不同的球(1~N);问你A或B中的C个球都出现一次的 期望次数 题解: dp[i][j][k]表示 随机出现了i个 ...
- 云Hbase数据库在亿方云实践之路
本文主要先介绍了亿方云,进而谈及了数据架构,着重分析了HBase实践等 2017云栖大会HBase专场,亿方云科技CTO 王成军带来HBase在亿方云客户端同步系统中的应用实践的演讲.本文主要先介绍了 ...
- list if else 遍历 特征合并
特征合并 import re l = ['a', 'b1'] ll = [i if re.search('\d', i) is None else i[0:re.search('\d', i).end ...
- 百度面试经历_web前端开发
百度面试经历_web前端开发 --2016年09月24日校招杭州站 刚面试完,担心过去就忘记掉,故回来时在地铁上用手机码下面试题目,供参考,也留作自己以后的面试参考依据.
- Persisting Data to the Device
Persisting Data to the Device Edit PagePage History Overview The Android framework offers several op ...
- 函数,#include <>和#include " "区别
l 4..函数定义到使用分三步:1.声明.2.定义函数.3.调用函数. 2.函数的定义格式:返回值 函数名(形参列表){ 函数体; return } 命名规则:1.只能由字母.数字.下划线或者美元符号 ...
- poyla计数问题
关于poyla定理,首先推荐两篇很好的文章阅读 2001-----符文杰<poyla原理及其应用> 2008-----陈瑜希<poyla计数法的应用> 在然后就是自己的学习笔记 ...
- html title属性
<table class="table table-hover table-striped"> @foreach (var article in Model) { &l ...
- HTML标签防XSS攻击过滤模块--待优化
HTML标签防XSS攻击过滤模块 http://cnodejs.org/topic/5058962f8ea56b5e7806b2a3
- jdbc 分页
连接数据库 public class DbUtil { private String driver = "oracle.jdbc.OracleDriver"; private St ...