在组件中提交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对象的属性名

    <script> var test={aa:12,bb:34};//或者var test={}; var cc= "acqId" test[cc]=12; alert( ...

  2. HDU4081 Qin Shi Huang's National Road System —— 次小生成树变形

    题目链接:https://vjudge.net/problem/HDU-4081 Qin Shi Huang's National Road System Time Limit: 2000/1000 ...

  3. WdatePicker.js的使用方法(转)

    WdatePicker.js的使用方法 博客分类: 其他   1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨 ...

  4. [Codeforces 1011E] Border

    [题目链接] https://codeforces.com/contest/1011/problem/E [算法]  裴蜀定理 : 设为n个整数,d是它们的最大公约数,那么存在整数 使得  显然 , ...

  5. [Codeforces 545E] Paths and Trees

    [题目链接] https://codeforces.com/contest/545/problem/E [算法] 首先求 u 到所有结点的最短路 记录每个节点最短路径上的最后一条边         答 ...

  6. Vue.js:安装node js到构建一个vue并启动它

    ylbtech-Vue.js:从安装node js到构建一个vue并启动它 1.返回顶部 1. 1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行 ...

  7. 如何管理第三方接口token过期时间

    背景: 随着微服务的盛行,做开发时不可避免的要涉及第三方接口,安全起见,这些接口都会需要一个token参数.而token一般都会有一个过期时间,比如2小时或者30分钟.那么如何在自己的应用中存储并管理 ...

  8. Go语言模拟文件断点续传以及多协程读取写入文件操作

    今天整理了一个Go语言多协程拷贝文件的案例,之前用Java写过,这次用Go语言来写一下,代码不难,也很简单,但是网上没有案例,整了很长时间.下面贴出来,供其他人参考学习. func main(){ f ...

  9. 数据结构 - 顺序栈的实行(C语言)

    数据结构-顺序栈的实现 1 顺序栈的定义 既然栈是线性表的特例,那么栈的顺序存储其实也是线性表顺序存储的简化,我们简称为顺序栈.线性表是用数组来实现的,对于栈这种只能一头插入删除的线性表来说,用数组哪 ...

  10. B Balala Power!

    Bryce1010模板 每个字母所在位置对应权值加和,肯定存不下. 但我们只需要26个字母对应值之间的关系即可,开一个数组a[i][j]分别记录字母i在j这个位置上出现了多少次,对于大于26的值进位, ...