Vue中的dispatch和commit

Vue中的dispatch和commit

• dispatch：异步操作，写法：this.$store.dispatch(‘action方法名’,值)
• commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

1、在Vue组件中提交mutation

文件位置：D:\vueTest\src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// Vuex的状态是响应式的

const store = new Vuex.Store({
	// 存储状态
	state: {
		count: 0
	}

	// mutation中最多有两个参数，第一个参数是state，如果要传多个参数，第二个参数可以传递一个对象
	mutations : {
		// 类型为increment的mutation
		increment(state) {
			// 变更状态
			state.count ++
		},

		// 类型为reduce的mutation
		reduce(state,n) {
			// 变更状态
			state.count -= n
		},
		// 	类型为change的mutation，第二个参数为一个对象
		change(state,payload) {
			// 变更状态
			state.count = state.count + payload.a + payload.b
		}
	}
})
export default store