Vuex深入理解

store下的index.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({
  state: {
    count: 100
  },
  mutations: {
    addIncrement (state, payload) {
      state.count += payload.n
    },
    deIncrement (state, payload) {
      state.count -= payload.de
    }
  },
  actions: {
    addAction (context) {
      setTimeout(() => {
        // 改变状态，提交Mutations
        context.commit('addIncrement', { n: 5 })
      }, 1000)
    }
  }
})

export default store

increment.vue文件中的js部分：

<script>
export default {
  computed: {
    num () {
      return this.$store.state.count
    }
  },
  methods: {
    addHandle () {
      this.$store.dispatch('addAction')
    },
    deHandle () {
      this.$store.commit({
        type: 'deIncrement',
        de: 10
      })
    }
  }
}
</script>

 vuex的简单使用