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 = false
Vue.use(Vuex)
/* eslint-disable no-new */
const store =  new Vuex.Store({
    modules:{
       HomeStore,
    }
});
export default store;
new Vue({
  el: '#app',
  router,
    store,
  template: '<App/>',
  components: { App }
})

home.vue

<template>
  <div>
    <div class="m-detail">
        <div class="add" @click="addCount">添加+</div>
        <div class="num">{{this.$store.getters.getStateCount}}</div>
        <div class="release" @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;
      }
      return state.num;
    }
}
const actions = {
    addDetail(ent){
       ent.commit('add'); 
    },
    releaseDetail(ent){
       ent.commit('release'); 
    }
}
export default {
     state,
     getters,
     mutations,
     actions
}

参考连接：https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc