vuex

main.js:

//The Vue build version to load with the `import` command//(runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'import HomeStore from './views/home/home-store'Vue.config.productionTip = falseVue.use(Vuex)
/*eslint-disable no-new */const store =  newVuex.Store({
    modules:{
       HomeStore,
    }
});
export defaultstore;
newVue({
  el: '#app',
  router,
    store,
  template: '<App/>',
  components: { App }
})

home.vue

<template>
  <div>
    <div class="m-detail">
        <div   @click="addCount">添加+</div>
        <div class="num">{{this.$store.getters.getStateCount}}</div>
        <div   @click="releaseCount">减少-</div>
    </div>
  </div>
</template>

<script>
//import mapState,mapActions,mapGetters  from 'vuex';
export default{
  name: 'HelloWorld',
  data () {
    return{
      msg: 'Welcome to Your Vue.js App',
    }
  },
  computed: {
       count () {
        //return this.$store.state.HomeStore.num;
}
  },
  methods:{
      addCount(){
         this.$store.commit('add');   
         //this.$store.dispatch('addDetail')  
},
      releaseCount(){
        this.$store.commit('release');  
        //this.$store.dispatch('releaseDetail')   
}
  }
}
</script>

home-store.js:

const state ={
    num: 0,
}
const getters ={
    getStateCount(state){
      return state.num+1;
    }
}
const mutations ={
    add(state){ 
      return state.num++;
    },
    release(state){
      state.num--;
      if(state.num<0){
          state.num = 0;
      }
      returnstate.num;
    }
}
const actions ={
    addDetail(ent){
       ent.commit('add'); 
    },
    releaseDetail(ent){
       ent.commit('release'); 
    }
}
export default{
     state,
     getters,
     mutations,
     actions
}