単純vue状態管理実装

                                                                 
components - > actions  ->  mutations  - >  state  < -  getters  < -  components
                                                
                            state                    state
                  

this.$store.dispatch()   //components actions     
mapActions()             //components actions     (  )


this.$store.commit()     //actions mutations  
                         //components mutations  (   )


mapGetters()             //components getters    (  )


$store.state            //components state     (   )

  :
 vue-cli      vuex
 src       store   
store   index.js/actions.js/getters.js/mutations.js/states.js

  index.js    
import Vuex from 'vuex';
import Vue from 'vue';
import actions from './actions'
import state from './state'
import getters from './getters'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
    actions,
    state,
    getters,
    mutations
})


states.js     ,    :
export default {
    count:0
}

    :
      +  ，  count         。

    :
   main.js      store
//import ...
import store from './store'     //     index.js


new Vue({
  name: 123,
  el:'#app',
  router,
  components: { App },
  template: '',
  store
})




    ：
1.  App         :
     
     
{{count}}


2. methods   mapActions()      actions  
export default {
     methods:
            mapActions([
            'add'
            ]),
}


3. actions.js     ,         commit   mutaitons
export default {
    add({commit,state},payload){
        //            ，    commit  ，               mutations
        //payload    ，            ,   payload 1
        payload=payload || 1
        commit("increment",payload)
    }
}


4. mutations.js        states        
export default {
    //mutation    state， state        
    increment(state,payload){
        state.count+=payload; //    
    }
}


5.getters    states    
export default {
    count(state){
       return state.count;
    }
}


6. App ，  computed  mapGetters(),   getters    ，             
//     count  states  count
 computed:mapGetters([
    'count'
  ])

簡単なステータス管理が実現しました.
サブコンポーネントでもcountを使用したい場合は、サブコンポーネントにmapgettersを導入しcomputedでデータを取得すればよい