在Vuex中Mutations修改状态操作
上篇是读取state,这篇是修改状态。即如何操作Mutations。
一.$store.commit()
Vuex提供了commit方法来修改状态
1.store.js文件
constmutations={ add(state){ state.count++ }, reduce(state){ state.count-- } }
2.在button上的修改方法
二.传值
最简单的修改状态的操作,在实际项目中我们常常需要在修改状态时传值。比如上边的例子,是我们每次只加1,而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数,并在commit的时候传递就就可以了。我们来看具体代码:
1.store.js
constmutations={ add(state,n){ state.count+=n }, reduce(state){ state.count-- } }
2.修改按钮的commit()方法传递的参数,我们传递10,意思就是每次加10.
三.模板获取Mutations方法
实际开发中我们也不喜欢看到$store.commit()这样的方法出现,我们希望跟调用模板里的方法一样调用。
例如:@click=”reduce”就和没引用vuex插件一样。
1.在模板count.vue里用import引入我们的mapMutations:
import{mapState,mapMutations}from'vuex'
2.在模板的
在vuex.store中接收这个参数
conststore=newVuex.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(){ constnewstu={ 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修改状态操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。