【Vue】mutations

文章目录

  • 一、定义mutations
  • [二、组件中提交 mutations](#二、组件中提交 mutations)
  • [三、带参数的 mutations](#三、带参数的 mutations)

一、定义mutations

mutations是vuex中的对象,这个对象可以定义在当前store的配置项中

js 复制代码
const store = new Vuex.Store({
  state: {
    count: 0
  },
  // 定义mutations
  // mutations是一个对象,对象中存放修改state的方法
  mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // 第二个参数:payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state, payload) {
      // 修改数据
      state.count += 1
    }
  },
})

二、组件中提交 mutations

jsx 复制代码
this.$store.commit('addCount') // 写的是mutations方法的名字

三、带参数的 mutations

目标

掌握 mutations 传参语法

语法

看下面这个案例,每次点击不同的按钮,加的值都不同,每次都要定义不同的mutations处理吗?

提交 mutation 是可以传递参数的 this.$store.commit('xxx', 参数)


提供mutation函数(带参数 - 提交载荷payload)

js 复制代码
mutations: {
  ...
  addCount (state, count) {
    state.count = count
  }
},

提交mutation

jsx 复制代码
handle ( ) {
  this.$store.commit('addCount', 10)
}

小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

jsx 复制代码
this.$store.commit('addCount', {
  count: 10
})
相关推荐
不收藏找不到我几秒前
浏览器交互事件汇总
前端·交互
小阮的学习笔记14 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜14 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=14 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧17 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck19 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!39 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript