注意: 只能通过 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. yolo v7使用triton部署

    https://github.com/WongKinYiu/yolov7/tree/main/deploy/triton-inference-server

  2. unity 2D 物体跟随鼠标旋转 移动

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class FollowMo ...

  3. vue高级进阶( 三 ) 组件高级用法及最佳实践

      vue高级进阶( 三 ) 组件高级用法及最佳实践 世界上有太多孤独的人害怕先踏出第一步. ---绿皮书 书接上回,上篇介绍了vue组件通信比较有代表性的几种方法,本篇主要讲述一下组件的高级用法和最 ...

  4. 【FPGA & Verilog】手把手教你实现一个DDS信号发生器

    信号发⽣器的设计与实现 1.输出波形:⽅波(占空⽐50%).锯⻮波.三⻆波.脉冲信号(占空⽐连续可调).正弦波.任意波等 2.输出频率:100KHz 3.波形选择:使⽤拨码开关选择   思路: 使用F ...

  5. 一个新App上线应该注意什么?

    一个新App上线应该关注哪些地方: 功能使用上无大问题遗留 用户使用体验尚佳 (前两条属于普通app更新也需要关注的点) 用户需要有反馈的入口,比如app内的反馈.用户可以直接联系到对应负责人进行反馈 ...

  6. 吴恩达老师机器学习课程chapter11——大规模机器学习

    吴恩达老师机器学习课程chapter11--大规模机器学习 本文是非计算机专业新手的自学笔记,高手勿喷. 本文仅作速查备忘之用,对应吴恩达(AndrewNg)老师的机器学期课程第十七章. 这是这次整理 ...

  7. 解决-装了WPS后Windows无法预览word、Excel、PPT等的问题

    https://www.bilibili.com/read/cv10469054/ https://www.cnblogs.com/qq3285862072/p/15097970.html Windo ...

  8. uniapp 离开界面清除计时器

            onLoad() {             // APP启动引导图逻辑判断显示             if (uni.getStorageSync("startImgSt ...

  9. 765. 情侣牵手 (Hard)

    问题描述 765. 情侣牵手 (Hard) n 对情侣坐在连续排列的 2n 个座位上,想要牵到对方的手. 人和座位由一个整数数组 row 表示,其中 row[i] 是坐在第 i 个座位上的人的 ID. ...

  10. Mysql数据库基础第二章:(八)子查询经典案例

    Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...