## <font color=red /> Vuex概念3：Mutation Vuex的store状态的更新唯一方式：提交Mutation Mutation两部分：字符串的事件类型（type）；一个回调函数（handler）,该回调函数的第一个参数就是state。 ### mutation的定义方式： ```javascript // new Vuex.Store 实例 mutations ： { incrementCount(state, payload) { state.counter += payload.count } } ``` ### 通过mutation更新 >在通过mutation更新数据的时候, 有可能携带一些额外的参数：载荷(Payload) ```javascript // APP.vue 的方法 addCount(count) { // this.$store.commit('incrementCount', count) // 1.普通的提交封装 this.$store.commit({ // 2.特殊的提交封装 type: 'incrementCount', count }) ``` ### Mutation响应规则 >当给state中的对象添加新属性时, 使用下面的方式: 方式一: 使用Vue.set(obj, 'newProp', 123) 方式二: 用新对象给旧对象重新赋值 ```javascript updateInfo(state) { // state.info['address'] = '洛杉矶' // Vue.set(state.info, 'address', '洛杉矶') // 方法一： Vue.set() state.info = {...state.info, 'height': payload.height} // 方法二： 给info赋值一个新对象 } ``` ### Mutation常量类型 >使用常量替代Mutation事件的类型，方便管理以及让整个app所有的事件类型一目了然. 创建一个文件: mutation-types.js, 并且在其中定义我们的常量. 定义常量时, 使用ES2015中的风格, 使用一个常量来作为函数的名称.