详解如何更好的使用module vuex

import axios from 'axios'
const listData = {
  namespaced:true,//注意 模块化管理数据请不要忘了命名空间的开启
  state:{
    List:[],
    count: 0,
    compoentData:[],
    number: 0

  },
  actions:{
    getListData(context){
      new Promise((resolve,reject)=>{
        axios.get('../../../static/listData.json').then((res)=>{
          context.commit('ListData',{'listDatas': res.data.listData})
        })
      })
    },
    handleAdd(context){
      context.commit("handleAddState")
    }
  
  },
  mutations:{
    ListData(state, paylod){
      state.List = paylod.listDatas
    },
    handleAddState(state){
      state.number++;
    }
  },
  getters: {
    List: state => state.List,
    count: state => state.count,
    number: state => state.number
  }
}
export default listData;

//这个是总的store，抛出各个模块的store
import Vue from 'vue'
import Vuex from 'vuex'
import homeData from './moudel/homeDataStore'
import listData from './moudel/listDataStore'
Vue.use(Vuex)
const store = new Vuex.Store({  
modules:{ 
    homeData,
    listData,
  }})export default store;

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ 
 el: '#app', 
router, 
store, 
render: h => h(App)
})

<template>
 <div> 
<router-link to='/'> 首页home</router-link><br/>
这是列表页list<br/>
<ul> 
<li v-for="item in List" v-bind:key="item.id">{{item.item}}</li> 
</ul>    
 <div>计算：</div>
    <div>{{number}}</div>
    <button @click='handleAdd()'>add</button> 
  </div></template><script>
import { mapGetters, mapActions } from 'vuex'
export default {  
name: 'list',
data(){    
return{}  
},  
computed:{    
  ...mapGetters('listData',['List','number'])  
},  
methods:{    
 //方法一： ...mapActions('listData',['getListData','handleAdd']),    
  //方法二：    
  ...mapActions({      
   getListData:"listData/getListData",      
   handleAdd:"listData/handleAdd"    
})  
},  
mounted(){    
  this.getListData();  
}}
</script>
<style></style>