注意: 只能通过 mutations里的函数才能修改 state 中的数据

第一种方法:

const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
state.count++
}
}
})
methods:{
addnum() {
this.$store.commit('add')
}
}

注意: mutations里不能包含异步操作。

如果组件之间需要传递参数

const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state,step){
state.count +=step
}
}
}) 
methods:{
addnum() {
this.$store.commit('add',3)
}
}
第二种方式:

import {mapMutations} from 'vuex'

  

mutations: {
add(state) {
state.count++
},
sub(state) {
state.count--
},
addN(state, step) {
state.count += step
},
subN(state, step) {
state.count -= step
}
},

  

import { mapState,mapMutations } from 'vuex'
computed:{
  ...mapState(['count'])
},
methods:{
...mapMutations(['sub','subN']),
decrement(){
this.sub()
},
decrementN(){
this.subN(5)
}
}

  

Vuex----Mutations的更多相关文章

  1. vuex 初体验

    vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...

  2. vue跨组件通信的几种方法

    http://www.tuicool.com/articles/jyM32mA 在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了 ...

  3. Vue开源项目库汇总

    最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...

  4. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  5. 适用初学者:vue2.0构建单页应用最佳实战

    参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...

  6. Vue常用开源项目汇总

    前言:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  7. Vue应用框架整合与实战--Vue技术生态圈篇

    实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...

  8. vue各种插件汇总

    https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

  9. VUE插件大总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  10. Vue相关开源项目库汇总

    https://github.com/opendigg/awesome-github-vue http://www.opendigg.com/tags/front-vue README.md 内容 U ...

随机推荐

  1. 在CentOS 7.4下配置VNC Server服务

    安装步骤 1. 查询系统是否安装vnc-server [root@localhost ~]# rpm –qa | grep vnc 如果有返回值,类似于vnc-server-的值,说明已经安装了vnc ...

  2. Spring Boot应用启动

    1.Eclipse 中启动Spring Boot应用 右键应用程序启动类, Run As Java Application 2.maven 命令: mvn spring-boot:run 在应用程序启 ...

  3. [.Net] 【笔记】基于.NET平台常用的框架整理(转载,侵删)

    分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度. Redis:是一个高性能的K ...

  4. SqlServer的主键和外键

    SqlServer在创建表时要有 完整性约束(主键)和参照性约束(外键) 1.在建表时创建主键 第一种方法: 第二种方法: 联合主键,即2个主键,sid和cid 2.如果表已经存在,需要创建主键 外键

  5. CUDA kernel使用printf调试,一定要加cudaDeviceSynchronize

    #include <stdio.h> __global__ void print() { printf("Hello from (%d, %d)\n", blockId ...

  6. QML调用C++程序

    QML调用C++程序 1. 添加C++,MouseMemory文件(.h,.cpp) 2. 在main.cpp文件添加, qmlRegisterType<MouseMemory>(&quo ...

  7. R7-1 判断回文字符串

    R7-1 判断回文字符串 分数 15 全屏浏览题目 切换布局 作者 颜晖-历年试卷 单位 浙大城市学院 输入一个字符串,判断该字符串是否为回文.回文就是字符串中心对称,从左向右读和从右向左读的内容是一 ...

  8. 移动端性能测试--CPU资源

    一.背景 在很多场景下我们去使用 App,可能会碰到手机会出现发热发烫的现象.这是因为 CPU 使用率过高.CPU 过于繁忙,会使得整个系统无法响应用户,整体性能降低,用户体验变得相当差,也容易引起 ...

  9. react backend uploadfile

    public List<string> WriteFile(List<UploadDTO> uploads) { List<string> fileNames = ...

  10. vue基础 · 过滤器(3)

    过滤器:filter Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以使用在2个地方:{{ }} 插值 和 v-bind 表达式(后者从 2.1.0+ 开始支持) 过滤器分为 ...