狀態管理器

在Redux中，Redux讓應用的數據被集中管理，整個應用的state儲存在惟一的store對象中，而且只能經過觸發action的方式來修改state。

 

在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())