vuex module写法基本使用

简单记录下不是很全，之前都是用的普通写法，具体请
看之前的博客，今天不忙，学习下module的写法，如有错误，
请大佬多指正目录结构

home.vue

<template>
  <div >
    <div>
        <div>
            主页年龄列表
        </div>
        <div v-for="(item,index) in  ageList
         :key="index" class="ageList"  	
         @click="clickList(item.age)">
            {{item.age}}
        </div>     
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return {
          ageList:[
              {age:11},
              {age:12},
              {age:13},
              {age:14},
              {age:15}
          ],
        setList :[
             {age:31},
             {age:32},
             {age:33},
             {age:34},
             {age:35}
        ]
      }
  },
  methods:{
      clickList(age){
      	触发mutation 注册事件（这么说好理解）
        this.$store.commit('ADD_AGE', age)
        this.$store.commit('SET_SONGLIST', this.ageList)
      }
  },
  mounted(){
    setTimeout(()=>{
    分发 Action，通过 store.dispatch 方法触发，
    因为mutation为同步，所以要荣国action进行异步操作
      this.$store.dispatch('upSongList', this.setList)
    },10000)
  }
}
</script>

list.vue

<template>
  <div >
    <div v-for="(item,index) in ageList" :key="index">
        {{item.age}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      ageList:[],

    }
  },
  mounted(){
  	从store中获取数组，初始化的时候获取的是home.vue中的ageList（
  	需要点击列表 进行设置），十秒后获取的是setList
    this.ageList = this.$store.state.list.songlist
  }
}
</script>

<style>

</style>

age.js

const ages = {
    state:{
        agea:0
    },
    mutations:{
        ADD_AGE:(state,agea)=>{
            state.agea=agea
        }
    },
    getters:{

    }
}
export default ages

list.js

const songList = {
    state:{
        songlist:[]
    },
    mutations:{
        SET_SONGLIST:(state,list)=>{
            state.songlist =list
        }
    },
    actions:{
    分发action，用于获取后台数据之后的操作，
    通过 store.dispatch 方法触发
        upSongList:({commit},list)=>{
            commit('SET_SONGLIST',list)
        }
    }
}
export default songList

index.js

import Vue from "vue";
import Vuex from 'vuex';
import persistedState from 'vuex-persistedstate' 
//数据本地持久化插件，在之前的博客中有 提到过
//require.context 方法使用，不了解的请参考文档
// https://webpack.js.org/guides/dependency-management/#requirecontext
const files = require.context('./module', true, /\.js$/)
const modules = files.keys().reduce((modules, path) => {
	const name = path.replace(/^\.\/(.*)\.\w+$/, '$1')
	const val = files(path)
	modules[name] = val.default
	return modules
  }, {})
Vue.use(Vuex);
const store= new Vuex.Store({
    modules,
  	plugins: [persistedState()]
})

export default store

页面效果如下

一个简单路由，两个组件切换，简单的代码我就不写了，如果有不对的地方，还请大佬指正