在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 相关文章推荐
关于跨站脚本攻击问题
Dec 22 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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 编写大型网站问题集
2010/05/07 PHP
深入php处理整数函数的详解
2013/06/09 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
JavaScript 继承的实现
2009/07/09 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
员工拓展培训方案
2014/02/15 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
建筑施工安全责任书
2014/07/24 职场文书
最美护士演讲稿
2014/08/27 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
防汛工作情况汇报
2014/10/28 职场文书
学术会议通知
2015/04/15 职场文书
高中班主任寄语
2019/06/21 职场文书