在Redux中，Redux让应用的数据被集中管理，整个应用的state储存在惟一的store对象中，而且只能经过触发action的方式来修改state。react
在Vuex中， Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态。小程序
1.state对象包含了应用的所有的状态
2.经过getters来得到state中的状态，或者是经过这些状态派生出来的一些状态
3.若是想修改state中的状态值，只能经过提交mutation的方式
4.action用来提交mutation，能够包含异步操做。 action只会被 store.dispatch方法触发异步
建立一个简单的状态管理器来模拟Redux或Vuex的状态转换。函数
// 自执行建立模块
(function() { /* states 结构预览 states = { a: 1, b: 2, m: 30, o: {} }*/
var states = {}; // 私有变量，用来存储状态与数据
// 判断数据类型
function type(elem) { if(elem == null) { return elem + ''; } return toString.call(elem).replace(/[\[\]]/g, '').split(' ')[1].toLowerCase(); } /** * @Param name 属性名 * @Description 经过属性名获取保存在states中的值 */
function get(name) { return states[name] ? states[name] : ''; } function getStates() { return states; } /* * @param options {object} 键值对 * @param target {object} 属性值为对象的属性，只在函数实现时递归中传入 * @desc 经过传入键值对的方式修改state树，使用方式与小程序的data或者react中的setStates相似 */
function set(options, target) { var keys = Object.keys(options); var o = target ? target : states; keys.map(function(item) { if(typeof o[item] == 'undefined') { o[item] = options[item]; } else { type(o[item]) == 'object' ? set(options[item], o[item]) : o[item] = options[item]; } return item; }) } // 对外提供接口
window.get = get; window.set = set; window.getStates = getStates; })() // 具体使用以下
set({ a: 20 }); // 保存 属性a
set({ b: 100 }); // 保存属性b
set({ c: 10 }); // 保存属性c
// 保存属性o, 它的值为一个对象
set({ o: { m: 10, n: 20 } }) // 修改对象o 的m值
set({ o: { m: 1000 } }) // 给对象o中增长一个c属性
set({ o: { c: 100 } }) console.log(getStates())