在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 弹出框口并返回值的两种常用方法
Dec 30 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
vue中移动端调取本地的复制的文本方式
Jul 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
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
JQuery里选择超链接的实现代码
2011/05/22 Javascript
javascript实现微信分享
2014/12/23 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
Ionic快速安装教程
2016/06/03 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
深入理解NumPy简明教程---数组2
2016/12/17 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
python能否java成为主流语言吗
2020/06/22 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
资产评估专业大学生求职信
2013/09/29 职场文书
爱护公物演讲稿
2014/09/09 职场文书
总经理聘用协议书
2015/09/21 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
python lambda 表达式形式分析
2022/04/03 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技