vuex是vue中单向数据流的一个状态管理模式，它可以集中存储管理应用中所有组件的状态，并且有一套相应的规则可以去预测数据的变化。类似与此的还有react中的redux,dva等状态管理模式。

一般我们的状态管理包含以下几个部分：

vue中的数据流为单向数流

单向数据流在兄弟组件需要传参或者多个组件需要使用同一个状态并且多个组将都可以改变该状态时不易进行维护。

因此，我们采取的是将多个共用的状态抽离到一个全局单例中（实际上就是将组件的状态抽离出来进行单独管理），其实在redux和dva中，是将每个组件的状态抽离到它自己的单例状态中，并且这些单例状态之间是互通的。

当然正如其他状态机模式一样，如果你不打算开发大型单页应用，也是没必要去使用vuex。

vuex应用的核心就是store,store中包含着我们应用中的大部分状态，vuex的状态存储是快速响应的，当store中的state有变化时，相应的组件也会快速的更新。并且我们需要遵循vuex中的规则，无法直接去改变state,改变store中的状态的唯一途径就是通过commit.

通过每次的commit中所含的信息，我们可以轻松明确的去看到我们每次改变state的意图，这样也方便我们将来对数据的追踪。

由于vuex使用单一状态树，也就是一个应用中的state你可以全部放到这一个store中，但是如果你放置的状态过多的时候，这也是挺鸡肋的不是？我还没有去看vuex如何将状态和状态变更的事件分布到各个子模块中去。

mapState是vuex提供的简化数据访问的辅助函数，mapState函数返回的是一个对象，通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给computed属性。

当然，使用vuex并不意味着我们将所有的状态放入vuex，虽然将所有的状态放到vuex会使状态变化更显示和易调试，但是如果全部放到了全局Store中我们的代码会变得冗长和不直观，所以这些个东西还需要边开发边权衡吧。

有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

vuex允许我们在store中定义“getter".就像计算属性一样，getter返回值会根据他的依赖被缓存起来，且只有当他的依赖值发生了改变才会被重新计算。

getter接受state作为其第一个参数：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

getter会暴露store.getters对象：
getter类似于dva中的reducer。

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }getter也可以接受其他getter作为第二个参数：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

我们可以很容易的在任何组件中调用它：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性。
例如：

computed:{
    ...mapGetters(['getter1','getter2'])
}

按照上述写法，全局store中的getter1和getter2函数便可以在局部组件中使用了。
如果想将一个getter属性另取一个名字，使用对象形式：

computed:{
    ...mapGetters({
        newGetter:"oldStoreGetter"
    })
}

更改Vuex的store中的状态的唯一办法是提交mutation.Vuex中的mutation非常类似于事件，这有点类似于dva中的effects,每一个mutation都会有一个字符串的事件类型和一个回调函数。这个回调函数就是我们实际进行状态更改的地方。并且他会接受state作为第一个参数：

 mutations: {
    setAdminInfo(state,adminInfo){
      state.adminInfo = adminInfo;
    },
    setCityList(state,cityList){
      state.cityList = cityList
    }
  }

当然了，我们还不能直接调用mutation handler,我们想要执行此函数时，需要以相应的type调用store.commit方法:

当我们需要给mutation传参时，我们需要通过payload来进行,上述例子中的adminInfo就是我们要传的的参数，在vuex中叫payload，当然，官方的建议是payload尽量是一个对象，这样我们在使用的时候能够更好的去追踪数据流。

当然，更好的调用mutation的方式是commit包含type属性的对象：

store.commit({
    type:'updateAdminInfo',
    adminInfo:{
        username:'allen',
        password:'qwe123',
    }
})

mutation需要遵守vue的响应规则

既然Vuex的store中的状态是响应式的，那么当我们变更状态时，监视状态的vue组件也会自动更新。这就意味着Vuex中的mutation也需要与Vue一样遵守一些注意事项：