• 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules。

• 

• 总结，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法以对象形式传入其实例中。要注意一个应用或是项目中只能存在一个Store实例！！

 import {mapState} from 'vuex' export default {computer :mapState({count: state => state.count,'count' // 映射 this.count 为 store.state.count})
}

import { mapGetters } from 'vuex'

computed: {// 使用对象展开运算符将 getters 混入 computed 对象中...mapGetters(['doneTodosCount','anotherGetter',])}//给getter属性换名字mapGetters({// 映射 this.doneCount 为 store.getters.doneTodosCountdoneCount: 'doneTodosCount'
})

• getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变 state里面的数据)，Vue的视图是由数据驱动的，也就是说state里面的数据是动态变化的，那么怎么改变呢，切记在Vuex中store数据改变的唯一方法就是mutation！

• 通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。

• mutation结构：每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。

   const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {      //注册事件，type:increment，handler第一个参数是state；// 变更状态state.count++}}})store.commit('increment')   //调用type，触发handler（state）     

• 载荷（payload）:简单的理解就是往handler(stage)中传参handler(stage,pryload)；一般是个对象。

    mutations: {increment (state, n) {state.count += n}}store.commit('increment', 10)

• mutation-types：将常量放在单独的文件中，方便协作开发。

      // mutation-types.jsexport const SOME_MUTATION = 'SOME_MUTATION'// store.js
  import Vuex from 'vuex'
  import { SOME_MUTATION } from './mutation-types'const store = new Vuex.Store({state: { ... },mutations: {// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名[SOME_MUTATION] (state) {// mutate state}
  }
  })

• commit：提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

  import { mapMutations } from 'vuex'export default {methods: {...mapMutations(['increment' // 映射 this.increment() 为 
  this.$store.commit('increment')]),...mapMutations({add: 'increment' // 映射 this.add() 为 
  this.$store.commit('increment')})}}

• 定义actions

  const store = new Vuex.Store({//创建store实例state: {count: 0},mutations: {                increment (state) {state.count++}},actions: {         //只是提交`commit`了`mutations`里面的方法。increment (context) {context.commit('increment')}}})一般我们会简写成这样actions: {increment ({ commit }) {commit('increment')}}

• 分发actions

  store.dispatch('increment')

• MapActions和MapState一级MapMutations类似。

Modules

• 背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。

• module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

• 一般结构

  const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }}
  const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }}const store = new Vuex.Store({
    modules: {
      a: moduleA,
      b: moduleB})

• 模块内部的数据：①内部state，模块内部的state是局部的，也就是模块私有的，比如是car.js模块state中的list数据，我们要通过this.$store.state.car.list获取；②内部getter、mutation和action，仍然注册在全局命名空间内，这是为了多模块可以同时响应同一mutation；this.$store.state.car.carGetter的结果是undefined，而通过this.$store.state.carGetter则可以拿到。

• 传参：getters====({state(局部状态),getters（全局getters对象）,roosState（根状态）})；actions====({state(局部状态),commit,roosState（根状态）}).