在组件中提交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. js数组清空和去重

    1.splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 Array[0],空数组,即被清空了 2 ...

  2. HDU1074 Doing Homework —— 状压DP

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1074 Doing Homework Time Limit: 2000/1000 MS (J ...

  3. C语言-1.static 和 extern使用,2.文件,3.数据块读写

    1.static 和 extern使用, 1)修饰局部变量 static修饰局部变量特点:延长局部变量的生命周期 ,static修饰的局部变量只会被执行一次 extern不能修饰局部变量 2)修饰全局 ...

  4. BZOJ_2844_albus就是要第一个出场_线性基

    BZOJ_2844_albus就是要第一个出场_线性基 Description 已知一个长度为n的正整数序列A(下标从1开始), 令 S = { x | 1 <= x <= n }, S ...

  5. 【HAOI 2006】 受欢迎的牛

    [题目链接] 点击打开链接 [算法] 先用tarjan缩点,然后找出度为零的点,即可 [代码] #include<bits/stdc++.h> using namespace std; # ...

  6. ThinkPHP3.2.3学习笔记2---模型

    一.模型实例化1.直接实例化可以和实例化其他类库一样实例化模型类,例如:$User = new \Home\Model\UserModel();$Info = new \Admin\Model\Inf ...

  7. CF670C Cinema 【离散化+map】

    题意翻译 莫斯科在举办一场重要的有 nn 个不同国家的珂学家参与的国际会议,每个珂学家都只会一种语言.为了方便起见,我们规定一种语言用 11 到 10^9109 的数来描述. 在会议之后的晚上,珂学家 ...

  8. 原生javascript之实战 轮播图

    成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: <div class="wr ...

  9. bind:Address alreasy is use

    在bind邦定时,通常会出现bind:Address alreasy is use错误. 此错误可以用setsockopt函数避免 int setsockopt(int sockfd,int leve ...

  10. Elasticsearch 2.3.2 安装部署

    先按照http://blog.csdn.net/love13135816/article/details/51690280这个教程安装, 不过后面的IK分词器安装部分有问题. 所以中文分词器插件的安装 ...