当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放
Baby Blue Badfinger - 无间道风云
引述自项目首页的话：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单说，状态管理的处理就是为了实现一个目的，那就是实现如何让变量对象优雅的穿梭在整个浩大的工程区中，不被无关变量、全局及块作用域影响的并且可以通过一个稳定的API实现赋值的作用。
vue框架提供了极其方便的组件化模式，可以几乎任意地将模版通过全局注册vue.component或者局部设置vue(...,component(),...)方法，与自己的网页文档内容进行愉快地组合，并只需简单地添加分号做到变量的双向绑定。然而vuex项目提供了一种更有趣的工具模式，让模版（即组件）可以共享变量，即并非上述传统的做法一样，使用父子组件传参绑定，而是把关键的变量做为全局单例，因此，在工程或者是组件的任意角落可以触及她并修改进而更像是一个全局的双向绑定。真正的开始：
一、有趣的概念
概念预览：
0、重要概念 - store ：不得不说的单一状态树
1、状态 - state
2、变更状态 - mutation
3、派生概念 :
a.基于state提出的 getters
b.基于提交mutation的 actions
0、 store是一个把
关键的变量做为全局单例
的具体实现，每个应用仅包含一个 store实例，所有的关键变量和其状态片段组成了 store实例对象。比如：
const Melon = new Vue({
el: xxx,
store,
template: xxx
})
由于 Vuex 还不能像构建 Component 实例那样，通过Vue的属性Vue.component，创建出全局对象，因此，她必须要通过Vue实例的store选项才可以完成全局部署的效果。但是，类似的，Vuex需要被Vue引用后方可正常运作，就是说在上例创建 Melon 实例前，需要声明插件：
Vue.use( Vuex );
创建 store 对象则异常简单，使用构造函数的方式：
const store = new Vuex.Store({
state: {
one：0
},
mutations: {
addState ( state ) {
state.one ++
}
}
})
1、state 属性保存状态片段；
2、mutation 保存修改状态的方法，提交状态就是提交修改状态方法。比如：
store.commit( 'addState' );
经过提交后的属性 state.one 成为1，这种变更会体现在所有的组件中。为了把控变更的深度广度，需要一个参数来指示请求范围，这就是载荷（payload）。常常使用载荷 对象，如：
mutations: {
addState ( state，payload ) {
state.one += payload.account
}
}
提交方式：
store.commit( 'addState' ，{ account: 10 } );
需要记住的是提交 mutation 是同步执行的，而后面提到的 action 则是任意异步的。
3-a、基于 state 提出的 getters，可以理解成独特的过滤器。或者说是特定的依赖属性。就像在 vue 控件下 computed 属性实现某种依赖构造，这种依赖在 vuex 中就表现到 store.state 属性上。完善store的属性，增加函数 judgeAndClear 来清除state.one 为偶数的情况，比如：
getters: {
judgeAndClear： state => state.one%2 !== 0
}
调用时，只有当值为奇数时，输出值否则为空；如：
store.getters.judgeAndClear() ? alert( store.state.one ) : ' '
3-b、actions 是
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
如：
actions: {
addState ( context ) {
context.commit( 'addState ' )
}
}
从表面看她像是一个将 mutation 的提交过程做简单包装的 store 属性，甚至有一个十分有趣的 context 参数，这个参数甚至可以调用 context.state 和 context.getters，像极了 store实例！
同样的，actions也有匹配的触发函数，dispatch，像：
store.dispatch( 'addState ' { account: 10 })
最重要的是：由于actions可以执行异步操作。异步逻辑可以通过嵌入到actions来提交commit，如延时：
actions: {
addState ( context ) {
setTimeout ( () => { context.commit( 'addState ' )
} ,1000 )
}
}
待续...
点击“阅读原文”可以在github上追踪vuex源码
原创内容，转载请注明出处
侵权必究@melonman
