action mutation 调用_mutation和action及mapMutations、mapActions

## mutation

拿到state，和传过来的数据，进行修改state里的数据

传参不能乱传，只有第二个参数，如果传多个数据，将这些数据包装成对象。

~~~

export default {

updateCount(state, num){

state.count = num;

}

}

~~~

~~~

组件中

this.$store.commit('updateCount',{num1: i++,num2:2});

mutation中

export default {

updateCount(state, {num1}){ //解构方法

state.count = num1;

}

}

~~~

commit只接收两个参数，第一个是mutation名称，第二个参数对象。

**mutation是用来专门修改state的数据的，vue官方推荐，所有state修改放在mutation的方法里**。但是外面是可以修改的，但是会报警告。

使用vuex目的：规范数据的修改。强制不能修改如下：

strict : true,

~~~

new Vuex.Store({

strict : true,

state: defaultState,

mutations,

getters

})

~~~

但是不要再正式环境中使用

~~~

const isDev = process.env.NODE_ENV === "development";

strict : isDev

~~~

此时才会warning，正式代码规范问题，如果随意修改，vuex的意义就没有了。

## actions

**store/getters/getters.js

store/mutations/mutations.js

store/state/state.js

store/actions/actions.js

store/store.js**

~~~

actions.js

export defalult {

//第一个参数是store,这个vux的store，第二个是触发action的对象，不会有第三个参数(封装成对象)

updateCountAsync(store, data ){

setTimeout(()=>{

store.commit('updateCount', {num1:data.num,num2:1})

},data.time)

}

}

~~~

**mutation必须同步操作数据，里面不能有异步代码，如果写异步代码，必须放入action中**

action:处理异步操作数据的方法

~~~

store.js

import defaultState from "./state/state.js"

import mutations from "./mutations.mutations.js"

import getters from "./getters/mutations"

import actions from "./actions/actions.js"

export default ()=>{

return new Vuex.Store({

state:defaultState ,

mutations,

getters,

actions

}

})

}

~~~

组件内部

dispatch:专门触发action

~~~

this.$store.dispatch("updateCountAsync",{num:5,time:2000})

~~~

**有异步代码，比如ajax请求，写入actions中，用同步代码，写在mutation中。**

## mapActions和mapMutationis

对应的 是操作，操作应写在methods中

~~~

组件中

import { mapState, mapGetters, mapActions, mapMutations} from "vuex";

methods:{

...mapActions:['updateCountAsync'],

...mapMutations:['updateCount'],

}

//使用方法

this.updateCountAsync({num:5,time:2000});

this.updateCount({num1:i, num2:1});

~~~

好处：调用方法的时候，不需要在传方法的名字，可以根据自己的需要建立方法的对应关系。

现在修改数据都是要刷新页面的。