今天的内容主要是介绍Vuex中的module，也是Vuex核心概念的最后一个啦。

一、module

1.产生原因

Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
  Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理，当应用变得非常复杂时,store对象就有可能变得相当臃肿.
  为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等。

2.使用方式

  正如上面所提到的，我们可以在module中声明多个模块，然后在每个模块中书写自己模块的state、mutation、action、getters。下面进行逐步的展示。

① module中的state

1-1 module中state的定义
定义的方式和store中定义state的方式一样，具体见下面的代码：

//单独模块的书写
const moduleA = {
  state:{
    name:'我是moduleA的name'
  }
}

//在store对象声明模块A
const store = new Vuex.Store({
    modules:{
        a:moduleA
    }
})

  在store对象的module中声明了moduleA，并且moduleA自己的state中有一个name变量。
1-2 module中state的使用

<template>
  <div id="app">
    <h2>-----Vuex中module的测试</h2>
    <h2>{{$store.state.a.name}}</h2>
  </div>
</template>

② 模块中的mutations

2-1 module中mutations的定义
定义的方式和store中的mutations定义的方式一样，具体见下面的代码：

//单独模块的书写
const moduleA = {
  state:{
    name:'我是moduleA的name'
  }，
  mutations:{
    updataName(state,payload){
      state.name = payload
    }
  }
}

//在store对象声明模块A
const store = new Vuex.Store({
    modules:{
        a:moduleA
    }
})

声明了 根据用户传递的参数修改姓名的updataName方法
2-2 module中mutations的使用
使用方式和store对象中的mutations一样，通过commit方法提交，具体代码如下：

<template>
  <div id="app">
    <h2>-----Vuex中module的测试</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">修改名字</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    updateName(){
      this.$store.commit('updataName','李四')
    }
  }
}
</script>

点击按钮，将修改成“李四”。效果如下：

③ 模块中的getters

3-1 模块中getters的定义
  定义的方式和在store中定义的方式类似。不同的是，如果在模块中想要使用store中state内的变量，需要通过rootState参数进行获取，具体代码如下：

//单独模块的书写
const moduleA = {
  state:{
    name:'我是moduleA的name'
  }，
  getters:{
    //1.普通应用
    fullname(state){
      return state.name +'1111'
    },
    //2.应用本模块的getters
    fullname2(state,getters){
      return getters.fullname +'2222'
    },
    fullname3(state,getters,rootState){
      return getters.fullname2 + rootState.counter
    }
  }
}

//在store对象声明模块A
const store = new Vuex.Store({
    modules:{
        a:moduleA
    }
})

用法1是简单的getters应用，将name的值后面追加上“1111”；
用法2是获取本模块中的getters，然后对获取到的结果再追加上“2222”；
用法3是获取store中的counter，通过rootState获取，然后再追加到到fullname2的结果中。
3-2 模块中getters的使用
使用方式和store中的类似，具体代码如下：

<template>
  <div id="app">
    <h2>-----Vuex中module的测试-----</h2>
    <h2>{{$store.getters.fullname}}</h2>
    <h2>{{$store.getters.fullname2}}</h2>
    <h2>{{$store.getters.fullname3}}</h2>
  </div>
</template>

其效果如下所示：

④ module的action

4-1 定义的方式

//单独模块的书写
const moduleA = {
  state:{
    name:'我是moduleA的name'
  }，
  mutations:{
    updataName(state,payload){
      state.name = payload
    }
  },
  actions:{
    aupdateName(context){
      setTimeout(()=>{
        context.commit('updataName','王五')
      },10)
    }
  }
}

//在store对象声明模块A
const store = new Vuex.Store({
    modules:{
        a:moduleA
    }
})

通过setTimeout来模拟异步操作，修改name的值为“王五”
4-2 使用方式

<template>
  <div id="app">
    <h2>-----Vuex中module的测试</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="asycnUpdateName">异步修改名字</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    asycnUpdateName(){
      this.$store.dispatch('aupdateName')
    }
  }
}
</script>