Vuex简单计数器

by 苹果熊

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router"></script>
<script src="https://unpkg.com/vuex"></script>
<app id="app"></app>

CSS

button {
  background: #f60;
  color: #fff;
  border: none;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition: all .2s linear;
}

button[disabled] {
  background: #ccc;
  color: #999;
}

JavaScript

var store = new Vuex.Store({
	state: {
  	nums: 0,
    disable: false
  },
  mutations: {
  	['ADD'](state) {
    	state.nums++
    },
    ['REDUCE'](state) {
    	state.nums--
    }
  },
  actions: {
  	add({commit, state}) {
    	state.disable = true
    	setTimeout(() => {
      	commit('ADD')
        state.disable = false
      }, 2000)
    },
    reduce({commit, state}) {	
    	if(state.nums < 1) return
    	state.disable = true
      setTimeout(() => {
      	commit('REDUCE')
        state.disable = false
      }, 2000)
    }
  }
})

var vm = new Vue({
	el: '#app',
  store,
  template: `<div>
              <p>{{nums}}</p>
              <p>
                <button @click="add" :disabled="disable">+</button>
                <button @click="reduce" :disabled="disable">-</button>
              </p>
              <p v-if="disable">计算中..</p>
            </div>`,
  computed: {
  	nums() {
    	return this.$store.state.nums
    },
    disable() {
    	return this.$store.state.disable
    }
  },
  methods: {
  	add() {
    	this.$store.dispatch('add')
    },
    reduce() {
    	this.$store.dispatch('reduce')
    }
  }
})