Vuex: mutations

by ecoblack

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app"></div>

JavaScript

const store = new Vuex.Store({
  state: {
    count: 1
  },
  // 1. 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。使用 mutation 作为变更 store 中的状态的唯一方式使得应用状态更为可控，并且结合开发者工具可以获得时空机般的调试体验
  mutations: {
    increment (state, payload) {
      state.count += payload;
    }
  }
})

new Vue({
	store,
	template: `
	<div>
		{{count}}
		<button @click="increment(1)">+1</button>
		<button @click="increment(2)">+2</button>
	</div>
	`,
	computed: {
		count() {
			return this.$store.state.count;
		}
	},
	methods: {
		increment(number) {
			// 2. 提交 mutation 使用 store.commit() 方法，第一个参数是提交的 mutation 名，第二个参数是提交的载荷（也就是数据）
			this.$store.commit('increment', number);
		}
	}
}).$mount('#app');