关于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刷新数据丢 ...
随机推荐
- 电商系统的演变可以看出架构演变 Dubbo入门 远程过程调用 需要解决的问题
Dubbo入门---搭建一个最简单的Demo框架 - CSDN博客 https://blog.csdn.net/noaman_wgs/article/details/70214612 Dubbo背景和 ...
- 不常见使用的css
flex和white-space等属性 1.flex属性让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容.style={{flex:5}},该元素占父元素的六分之五. 2. white- ...
- BZOJ_5368_[Pkusc2018]真实排名_组合数
BZOJ_5368_[Pkusc2018]真实排名_组合数 Description 小C是某知名比赛的组织者,该比赛一共有n名选手参加,每个选手的成绩是一个非负整数,定义一个选手的排名是:成绩不小于他 ...
- linux下libpcap抓包分析
一.首先下载libpcap包http://www.tcpdump.org/#latest-release 然后安装,安装完成后进入安装根目录的tests文件夹,编译运行findalldevstest. ...
- choice() 函数
描述 choice() 方法返回一个列表,元组或字符串的随机项. 语法 以下是 choice() 方法的语法: import random random.choice( seq ) 注意:choice ...
- linux下解压tgz文件(转载)
转自:http://www.blogjava.net/chenlb/archive/2008/09/03/226654.html .tgz 解压: tar zxvf myfile.tgz
- Excel -- 实用技巧
一起来学习这45个职场Excel小窍门,轻轻松松提高工作效率,超实用,新技能get! 1.快速填充公式的三种方式 2.最快求和 3.添加文字下面线条的2种方法 4.设置列宽的3种方法 5.以cm为单位 ...
- bzoj 2783: [JLOI2012]树【树上差分】
注意是等于s不是大于s dfs,用set或者map存这条链到root的点权和sum[u],更新答案的时候查一下有没有s-sum[u]即可 #include<iostream> #inclu ...
- python之对堆栈、队列处理操作(转载+个人看法)
参考链接:https://blog.csdn.net/u010786109/article/details/40649827 python实现堆栈操作 堆栈是一个后进先出的数据结构,其工作方式就像一堆 ...
- 【已解决】python中文字符乱码(GB2312,GBK,GB18030相关的问题)
http://againinput4.blog.163.com/blog/static/1727994912011111011432810/ [已解决]python中文字符乱码(GB2312,GB ...