在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 相关文章推荐
Javascript JSQL,SQL无处不在,
May 05 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
如何利用React实现图片识别App
Feb 18 Javascript
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
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
javascript中Function类型详解
2015/04/28 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python编程flask使用页面模版的方法
2018/12/28 Python
python安装requests库的实例代码
2019/06/25 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
司机的工作范围及职责
2013/11/13 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
申报优秀教师材料
2014/12/16 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
小学教研工作总结2015
2015/05/13 职场文书
退休欢送会主持词
2015/07/01 职场文书
技术入股合作协议书
2016/03/21 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python