在Vuex中Mutations修改状态操作


Posted in Javascript onJuly 24, 2020

上篇是读取state,这篇是修改状态。即如何操作Mutations。

一. $store.commit( )

Vuex提供了commit方法来修改状态

1.store.js文件

const mutations={
  add(state){
    state.count++
  },
  reduce(state){
    state.count--
  }
}

2.在button上的修改方法

<button @click="$store.commit('add')">+</button>

<button @click="$store.commit('reduce')">-</button>

二. 传值

最简单的修改状态的操作,在实际项目中我们常常需要在修改状态时传值。比如上边的例子,是我们每次只加1,而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数,并在commit的时候传递就就可以了。我们来看具体代码:

1.store.js

const mutations={
  add(state,n){
    state.count+=n
  },
  reduce(state){
    state.count--
  }
}

2.修改按钮的commit( )方法传递的参数,我们传递10,意思就是每次加10.

<button @click="$store.commit('add',10)">+</button>

<button @click="$store.commit('reduce')">-</button>

三.模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现,我们希望跟调用模板里的方法一样调用。

例如:@click=”reduce” 就和没引用vuex插件一样。

1.在模板count.vue里用import 引入我们的mapMutations:

import { mapState,mapMutations } from 'vuex'

2.在模板的<script>标签里添加methods属性,并加入mapMutations

methods:mapMutations([
    'add','reduce'
]),

3.在模板中直接使用我们的reduce或者add方法

<button @click="reduce">-</button>

注意:封装起来$store.commit

reduce: function () {
   this.$store.commit('add', 10) // html标签是可以不写this
  }

补充知识:vuex mutations参数传递

接下来做一个mutations的传参讲解

添加学生的例子

第一种传参的方式

<template>
 <div>
 <h3>-------------------这是mutations传参测试-------------------</h3>
 <div>
  {{this.$store.state.students}}//将已经有的学生渲染在这儿
  <div>
  <button @click="addstu">点击添加</button>//绑定添加事件
  </div>
 </div>
 </div>
</template>

<script>
export default {
 methods: {
  addstu () {
   const newstu = {
   id: 5,
   name: '张国荣',
   age: 44
   }//定死一个要添加的学生,这就是要传给mutations的参数
   this.$store.commit('addStudent', newstu)
   //调用commit方法,更新state的数据,
   //第一个参数是mutations里面的方法名,
   //第二个参数是传给mutaitons里面addstudent方法的一个参数,
   //也就是要新加入的学生
  }
 }
}
</script>

在vuex.store中接收这个参数

const store = new Vuex.Store({
// 定义的公共变量
  state: {
   count: 1,
   students: [
    {
     id: 1,
     name: 'dx',
     age: 18
    },
    {
     id: 2,
     name: 'yx',
     age: 18
    },
    {
     id: 3,
     name: 'ym',
     age: 32
    },
    {
     id: 4,
     name: '刘亦菲',
     age: 30
    }
   ]
  },
 // state中的变量只能在mutations中通过方法修改
  mutations: {
   changeCount: function (state) {
   state.count++
   console.log('改变了count')
   },
   addStudent (state, stu) {
   state.students.push(stu)
   }//通过这种方式,接收来自组件传过来的新加入的学生
  },
  actions: {
  },
  getters: {
  }
})

第二种传参的方式

组件向vuex传参

addstu () {
   const newstu = {
   id: 5,
   name: '张国荣',
   age: 44
   }
   this.$store.commit({
   type: 'addStudent',
   newstu: newstu
   })//原先是传入两个参数,现在直接传入一个对象
   //type就是需要调用的mutations里面的方法
   //newstu就是要求接收的对象,也就是新加入的学生
  }

vuex接收组件传参

mutations: {
   addStudent (state, playload) {
   state.students.push(playload.newstu)
   }
  },

需要注意的是,addstudent接收到的第二个参数是一个完整的对象,所以参数的使用略微有点不同

以上这篇在Vuex中Mutations修改状态操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
jquery css实现流程进度条
Mar 26 jQuery
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
jQuery实现全选按钮
Jan 01 jQuery
Vue自动构建发布脚本的方法示例
Jul 24 #Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 #Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 #Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 #Javascript
vue+axios全局添加请求头和参数操作
Jul 24 #Javascript
vue在响应头response中获取自定义headers操作
Jul 24 #Javascript
vuex存取值和映射函数使用说明
Jul 24 #Javascript
You might like
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
详解Django通用视图中的函数包装
2015/07/21 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
挂靠协议书范本
2014/04/22 职场文书
养牛场项目建议书
2014/05/13 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
补充协议书
2015/01/28 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android