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的简单使用