Vuex的使用

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

Vuex的五大属性：

　　1.state：vuex的基本数据，用来存储变量

　　2.geeter：从基本数据(state)派生的数据，相当于state的计算属性

　　　Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

　　　　    

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

　　　　store.getters.doneTodosCount

　

　　3.mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

　　 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数，有的人会问载荷是什么，前面说了想要改变store唯一的途径就是 store.commit ，你可以向 store.commit 传入额外的参数，即 mutation 的 载荷，如：

　　

这里我们有一个名为CITY_INFO的mutation，那么我们在调用它的时候就可以在method中写上一个方法去调用它，这里的第一个参数即是我们调用的mutation，第二个参数即是我们传入的载荷。

　　4　action：和mutation的功能大致相同，不同之处在于 ==>1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

　　Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

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

　　在上面两张图中可能有人发现了我所展示出来的就是一个模块，所以我在调用mutation的时候是写的是的city/CITY_INFO，而我已经在store实例中注册了这个模块，上图