如果项目很大再store的index.js里面可能就有很多的内容，不便于管理，vuex支持在主模块下面创建子模块：
store/index.js:
import { createStore } from 'vuex'
//新建一个子模块，也可以将这个子模块写在外面的一个js文件中，这里引入
const user = {
state: {
userName: 'jack',
password: '123'
},
getters:{
//rootState可以访问父模块的state中的内容
fullName(state,getter,rootState){
return state.userName + " " +rootState.name;
}
},
mutations: {
changeUserName(state,payload){
state.userName = payload;
}
},
actions:{
//context中有state（自己模块的state）,commit(自己模块的mutations),getters（自己模块的getters）,
//rootGetters(父模块的getters),rootState(父模块的state)
smt(context,payload){
setTimeout(()=>{
//用父模块的name赋值给子模块的uaerName
context.commit('changeUserName',context.rootState.name);
},2000);
}
}
}
export default createStore({
state: {
name: 'tom',
age: '10'
},
mutations: {
},
actions: {
},
//挂载子模块
modules: {
user
}
})
访问子模块中的各个对象：
<template>
<div class="about">
<h1>{{$store.state.user.userName}}</h1>
<button @click="click1()">改变user模块中的userName值</button>
<h1>调用模块中的getters:{{$store.getters.fullName}}</h1>
<button @click="click2()">调用模块中的action 2s后改变值</button>
</div>
</template>
<script>
export default {
name: 'About',
methods: {
click1(){
//调用子模块的mutations中的方法时不用加上子模块的名称，vue会在所有模块中搜索，所有要保持所有模块中mutations中的方法名都不一样
this.$store.commit('changeUserName','maycpou');
},
click2(){
//调用子模块的action一样，不需要子模块的名称，所以要保持方法名不同
this.$store.dispatch('smt','cp3');
}
}
}
</script>