vuex中mutation理解

vuex中的方法是用来实现的，一旦组件中调用vuex中的方法，默认是会提交一个state参数的，这个state就对应vuex中state对象

组件中如何直接调用mutation中的方法？

将mutations中的函数可以看做两部分：

字符串的事件类型：这个指的就是函数的名称，把它当做一个事件名称，通过commit调用的时候this.$store.commit('xxx')

一个回调函数，该回调函数的第一个参数就是state，意思就是说第一个参数不管名称是啥，它都是指的state，所以一般都以state的名称写上，写上的目的是一般都要利用state中的变量做事情，

Mutation的提交参数风格

一、普通方式

没有参数的写法：

//实现
increment(state){
    state.counter++
}
//调用
this.$store.commit('increment')

非对象参数：

incremetnCount(state,count){
    state.counter += count
}

//调用
this.$store.commit('incremetnCount'，count)，这个count参数是包装它的方法中传进来的参数

有对象参数：如果有多个参数需要传的话，先把它们放到一个对象中去传

addStudent(state,stu){
    state.student.push(stu)
}

const stu = {age:18,name:'james'}
this.$store.commit('addStudent',stu)

注意：携带的参数就叫做payload

二、将提交的东西都放到一个对象中

this.$store.commit({
    type: 'incrementCount',
    count  //这个是ES6中的写法，相当于count:count
})

count：count   第一个count是形参名称，第二个count是传入的值，简写为count

那么mutation中实现的时候，形参最好写成payload，代表传入的是对象，就是调用传进来的对象

incrementCount(state,payload){
    //取出count的话就是从payload对象中取
    state.counter += payload.count
}

为什么要把mutation中的方法名称要写成一个常量？

因为mutation中的方法名称和组件中commit的方法名称是一致的，并且组件中传递方法名称还要用单引号括起来，写起来也不方便

如何定义成常量呢？

1.在store文件夹下新建一个文件：mutations-type.js

export const INCREMENT = 'increment'

export const ADD = 'add'

2.store的index.js中

import {INCREMENT,ADD} from ...

[ADD](state,stu){...}

3.组件中也是先引入，方法中直接传递常量