在组件中提交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的更多相关文章

  1. 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(四)-----mapActions

    介绍mapActions辅助函数: Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的:Action是支持异步操作的,而Mut ...

  2. 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(三)-----mapGetters

    简单的理解: const getters = { newCount: function(state){ return state.count += 5; } } ------------------- ...

  3. 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState

    一.通过mapState函数的对象参数来赋值: <p>{{ count }}</p> <p>{{ count1 }}</p> <p>{{ c ...

  4. vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用

    一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: ​ index.js如下: import Vue from 'vue'; import ...

  5. vuex mapState、mapGetters、mapActions、mapMutations的使用

    例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...

  6. Veux mapState、mapGetters、mapActions、mapMutations && Vuex命名空间

    1 # 一.四个map方法的使用 2 # 1.mapState方法:用于帮助我们映射state中的数据为计算属性 3 computed:{ 4 // sum(){ 5 // return this.$ ...

  7. vuex学习与实践——mapState、getter、mapGetters

    1.mapState辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键 ...

  8. vuex状态管理demo

    vuex状态管理主要包含四个概念  mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...

  9. vue使用--vuex快速学习与使用

    什么是vuex? Vuex核心概念 Vuex安装与使用 1.安装 2.目录结构与vuex引入 3.store中变量的定义.管理.派生(getter) 4.vuex辅助函数的使用说明 Vuex刷新数据丢 ...

随机推荐

  1. 2016/3/1 淘宝 腾讯 网易 css初始化代码 以及最基础的初始化

    淘宝官网(http://www.taobao.com/)样式初始化 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, o ...

  2. solr入门之多线程操作solr中索引字段的解决

    涉及的问题: 建索引时有一个字段是该词语出现的次数,这个字段是放在solr里的  而我用的是多线程来进行全量导入的,这里就涉及到了多线程问题 多个线程操作同一个变量时怎样处理? 我是这样子做的 : 首 ...

  3. 两大数相乘 -- javascript 实现

    (function (){ var addLarge = function(n1,n2){ var carry = 0; var ret = ""; n1=n1.toString( ...

  4. PP-生产订单状态

    转自:http://www.cnblogs.com/mingdashu/p/5566108.html SAP系统的常见订单状态如下: ·        CRTD (创建):标识生产订单刚刚创建,此时禁 ...

  5. mysql15--垂直分表水平分表

    分表技术(表的结构不能变) 分表技术有(水平分割和垂直分割) 当一张越来越大时候,即使添加索引还慢的话,我们可以使用分表 以qq用户表来具体的说明一下分表的操作. 思路如图 : 首先我创建三张表 u ...

  6. openssl动态库编译

    通常Linux系统自带OpenSSL,但是其so文件由于没有debug信息,因此无法跟踪内部函数,对于学习 不太方便,需要通过源码重新安装.         我的Linux系统是CentOS7,自带的 ...

  7. Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate

    Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate 2012-12-28 21:04 来源:博客园 作者:chengxingli ...

  8. python3中urllib的基本使用

    urllib 在python3中,urllib和urllib2进行了合并,现在只有一个urllib模块,urllib和urllib2的中的内容整合进了urllib.request,urlparse整合 ...

  9. .NETFramework-Drawing:Font

    ylbtech-.NETFramework-Drawing:Font 1.返回顶部 1. #region 程序集 System.Drawing, Version=4.0.0.0, Culture=ne ...

  10. HDU 4893 Wow! Such Sequence! (树状数组)

    题意:给有三种操作,一种是 1 k d,把第 k 个数加d,第二种是2 l r,查询区间 l, r的和,第三种是 3 l r,把区间 l,r 的所有数都变成离它最近的Fib数, 并且是最小的那个. 析 ...