Vue2.0 中大型项目中如何使用Vuex

main.js   注意  vue2.0 不能使用vuex4  降低vuex版本  当前使用vuex@3.6.2

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

目录结构

 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app.js'
import getters from './getters.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules:{
     app
  },
  getters
})

export default store

getters.js

const getters = {
  shop_num : state => state.app.shop_num
}

export default getters

app.js

const state = {
      shop_num:0
}

const mutations = {
      AddShop_num(e,a){
          e.shop_num += a;
      }
}

const actions = {
      addShop_num(e,a){
          e.commit('AddShop_num',a)
      }
}

export default {
    namespaced:true,
    state,
    mutations,
    actions
}

页面直接调用

console.log(this.$store.getters.shop_num)

this.$store.dispatch('app/addShop_num',2)

console.log(this.$store.getters.shop_num)