狀態(tài)管理從0開(kāi)始[后續(xù)更新]

OnlyLing 發(fā)布于2019-08-21 18:38 / 497人閱讀

摘要：命名一個(gè)要一個(gè)只讀創(chuàng)建一些列改變需要一個(gè)監(jiān)聽(tīng)改變每一次改變狀態(tài)的時(shí)候執(zhí)行調(diào)用返回狀態(tài)優(yōu)化想要第一次監(jiān)聽(tīng)的時(shí)候返回當(dāng)前狀態(tài)監(jiān)聽(tīng)改變狀態(tài)統(tǒng)一使用調(diào)用法打印日志信息監(jiān)聽(tīng)改變之前的狀態(tài)監(jiān)聽(tīng)改變之后的狀態(tài)可以少寫好多個(gè)優(yōu)化想要第一次監(jiān)聽(tīng)的時(shí)候返回當(dāng)前

Step01.命名一個(gè)storeService要一個(gè)只讀state

var storeService = new Object({
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    }
});

Step02.創(chuàng)建一些列mutation改變state

var storeService = new Object({
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },
    mutationModifyAge(newAge) {
        state.age = newAge;
    },
    mutationModifyAge2(newAge) {
        state.age = newAge;
    },
    mutationModifyAge3(newAge) {
        state.age = newAge;
    }
});

Step03.需要一個(gè)watch監(jiān)聽(tīng)改變,每一次改變狀態(tài)的時(shí)候（執(zhí)行mutation）調(diào)用listenCallback 返回狀態(tài)

var storeService = new Object({
    _listeners: [],
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },
    mutationModifyAge(newAge) {
        state.age = newAge;
        this._dealCallback();
    },
    mutationModifyAge2(newAge) {
        state.age = newAge;
        this._dealCallback();
    },
    mutationModifyAge3(newAge) {
        state.age = newAge;
        this._dealCallback();
    },
    _dealCallback() {
        this._listeners.forEach(listener => listener(this.state))

    },
    watch(listener) {
        // 優(yōu)化想要第一次監(jiān)聽(tīng)的時(shí)候返回當(dāng)前狀態(tài)
        listener(this.state);
        this._listeners.push(listener);
    }
});
// 監(jiān)聽(tīng)store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.mutationModifyAge(2)

Step04.統(tǒng)一使用dispatch調(diào)用mutation法

var storeService = new Object({
    _listeners: [],
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },
    dispatch(type, ...paylod) {
        // 打印日志信息
        console.log(type ? type : "監(jiān)聽(tīng)", "改變之前的狀態(tài)", this.state);
        if (this._mutation[type]) {
            this._mutation[type](this.state, ...paylod);
        }
        console.log(type ? type : "監(jiān)聽(tīng)", "改變之后的狀態(tài)", this.state);
        // 可以少寫好多個(gè)listenCallback
        this._dealCallback();
    },
    _mutation: {
        mutationModifyAge(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge2(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge3(state, newAge) {
            state.age = newAge;
        }
    },
    _dealCallback() {
        this._listeners.forEach(listener => listener(this.state))

    },
    watch(listener) {
        // 優(yōu)化想要第一次監(jiān)聽(tīng)的時(shí)候返回當(dāng)前狀態(tài)
        // listener(this.state);
        // 優(yōu)化讓第一次監(jiān)聽(tīng)也可以記錄歷史日志
        this.dispatch();
        this._listeners.push(listener);
    }
});
// 監(jiān)聽(tīng)store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.dispatch("mutationModifyAge", 2)

以上內(nèi)容為創(chuàng)建一個(gè)簡(jiǎn)單的store。
 以下開(kāi)始按照Vuex0.3.0開(kāi)始優(yōu)化
 Step05.vuex dispatcher調(diào)用的方法是mutation，
 mutation是唯一操作state的方法，
 mutation不可包含任何副作用，
 mutation對(duì)外暴露dispatch調(diào)用將上面的mutation 改為mutation

var storeService = new Object({
    _listeners: [],
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },
    dispatch(type, ...paylod) {
        // 打印日志信息
        console.log(type ? type : "監(jiān)聽(tīng)", "改變之前的狀態(tài)", this.state);
        if (this._mutation[type]) {
            this._mutation[type](this.state, ...paylod);
        }
        console.log(type ? type : "監(jiān)聽(tīng)", "改變之后的狀態(tài)", this.state);
        // 可以少寫好多個(gè)listenCallback
        this._dealCallback();
    },
    _mutation: {
        mutationModifyAge(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge2(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge3(state, newAge) {
            state.age = newAge;
        }
    },
    _dealCallback() {
        this._listeners.forEach(listener => listener(this.state))

    },
    watch(listener) {
        // 優(yōu)化想要第一次監(jiān)聽(tīng)的時(shí)候返回當(dāng)前狀態(tài)
        // listener(this.state);
        // 優(yōu)化讓第一次監(jiān)聽(tīng)也可以記錄歷史日志
        this.dispatch();
        this._listeners.push(listener);
    }
});
// 監(jiān)聽(tīng)store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.dispatch("mutationModifyAge", 2)

Step05.vuex中mutation為純函數(shù)，不可包含任何副作用，添加action來(lái)處理一系列副作用，最終還是調(diào)用dispatch 去改變state

var storeService = new Object({
    _listeners: [],
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },

    dispatch(type, ...paylod) {
        // 打印日志信息
        console.log(type ? type : "監(jiān)聽(tīng)", "改變之前的狀態(tài)", this.state);
        if (this._mutation[type]) {
            this._mutation[type](this.state, ...paylod);
        }
        console.log(type ? type : "監(jiān)聽(tīng)", "改變之后的狀態(tài)", this.state);
        // 可以少寫好多個(gè)listenCallback
        this._dealCallback();
    },
    _mutation: {
        mutationModifyAge(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge2(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge3(state, newAge) {
            state.age = newAge;
        }
    },
    _dealCallback() {
        this._listeners.forEach(listener => listener(this.state))
    },
    watch(listener) {
        // 優(yōu)化想要第一次監(jiān)聽(tīng)的時(shí)候返回當(dāng)前狀態(tài)
        // listener(this.state);
        // 優(yōu)化讓第一次監(jiān)聽(tīng)也可以記錄歷史日志
        this.dispatch();
        this._listeners.push(listener);
    },
    bindAction(actions) {
        this.actions = Object.create(null);
        this._actions = Object.create(null);

        function createAction(action, store) {
            if (typeof action === "function") {
                return (...payload) => action(store, ...payload)
            }
        }
        Object.keys(actions).forEach(name => {
            console.log(actions[name]);
            this._actions[name] = createAction(actions[name], this)
            if (!this.actions[name]) {
                this.actions[name] = (...args) => this._actions[name](...args)
            }
        })
    }
});
var actions = {
    // 包含副作用的action
    asyncModifyAge(store, ...paylod) {
        setTimeout(() => {
            store.dispatch("mutationModifyAge", ...paylod)
        }, 2000);
    },
    // 多次調(diào)用dispatch
    asyncMulModifyAge(store, ...paylod) {
        setTimeout(() => {
            store.dispatch("mutationModifyAge", ...paylod)
        }, 2000);
        store.dispatch("mutationModifyAge2", ...paylod)
    }
}
storeService.bindAction(actions);
// 監(jiān)聽(tīng)store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.dispatch("mutationModifyAge", 2)
storeService.actions.asyncMulModifyAge(21);

Step06 封裝成一個(gè)類hKeeper

var defaultOption = {
    state: {},
    actions: {},
    mutations: {}
};
class hKeeper {
    constructor(options) {
        options = Object.assign({}, defaultOption, options);
        this._state =  options.state;
        this.listeners = [];
        const dispatch = this.dispatch;
        this.dispatch = (...args) => {
            dispatch.apply(this, args);
        };
        this.actions = Object.create(null);
        this._setupMutations(options.mutations);
        this._setupActions(options.actions);
    }
    get state() {
        return this._state
    }

    set state(v) {
        throw new Error("[hKeeper] hKeeper state is read only.")
    }
    dispatch(type, ...payload) {
        const mutation = this._mutations[type]
        const state = this.state
        if (mutation) {
            mutation(state, ...payload)
        }
        this.listeners.forEach(listener => listener(this.state))
    }
    _setupMutations(mutations) {
        this._mutations = mutations;
    }
    // 設(shè)置action
    _setupActions(actions) {
        function createAction(action, store) {
            if (typeof action === "function") {
                return (...payload) => action(store, ...payload)
            }
        }
        this._actions = Object.create(null)
        Object.keys(actions).forEach(name => {
            this._actions[name] = createAction(actions[name], this)
            if (!this.actions[name]) {
                this.actions[name] = (...args) => this._actions[name](...args)
            }
        })
    }
    watch(listener) {
        listener(this.state);
        this.listeners.push(listener)
    }
}
var storeService = new hKeeper(
    {
        state: { age: 1 },
        actions: {
            // 包含副作用的action
            asyncModifyAge(store, ...paylod) {
                setTimeout(() => {
                    store.dispatch("mutationModifyAge", ...paylod)
                }, 2000);
            },
            // 多次調(diào)用dispatch
            asyncMulModifyAge(store, ...paylod) {
                setTimeout(() => {
                    store.dispatch("mutationModifyAge", ...paylod)
                }, 2000);
                store.dispatch("mutationModifyAge2", ...paylod)
            }
        },
        mutations: {
            mutationModifyAge(state, newAge) {
                state.age = newAge;
            },
            mutationModifyAge2(state, newAge) {
                state.age = newAge;
            },
            mutationModifyAge3(state, newAge) {
                state.age = newAge;
            }
        }
    }
)
// 監(jiān)聽(tīng)store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.dispatch("mutationModifyAge", 2)
storeService.actions.asyncMulModifyAge(21);

參考Vuex0.3.0版本 applyMiddleware 參考Redux 
https://github.com/HereSincer...

GPU云服務(wù)器云服務(wù)器 php從0開(kāi)始從0開(kāi)始學(xué)習(xí)php 匯編語(yǔ)言從0開(kāi)始從0開(kāi)始數(shù)據(jù)分析

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90674.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

OnlyLing

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow.org

閱讀 2554·2023-04-25 19:47
前端每日實(shí)戰(zhàn)：162# 視頻演示如何用原生 JS 創(chuàng)作一個(gè)查詢 github 用戶的應(yīng)用（內(nèi)含 2

閱讀 3399·2019-08-29 17:18
vue配置多頁(yè)面

閱讀 862·2019-08-29 15:26
微信小程序?qū)崿F(xiàn)連接藍(lán)牙設(shè)備跑步APP

閱讀 3372·2019-08-29 14:17
使用FormData對(duì)象上傳文件

閱讀 1156·2019-08-26 13:49
styled-components 中文文檔翻譯及不完全指北

閱讀 3350·2019-08-26 13:22
JS語(yǔ)句后加不加分號(hào)

閱讀 3035·2019-08-26 10:44
angular2 NgModel` 模塊

閱讀 2703·2019-08-23 16:51

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

狀態(tài)管理從0開(kāi)始[后續(xù)更新]

相關(guān)文章

不可不說(shuō)的Java“鎖”事

JStorm源碼分析系列--01--Nimbus啟動(dòng)分析

React Hook起飛指南

聊一聊H5應(yīng)用緩存-Manifest

我的Android重構(gòu)之旅：架構(gòu)篇

發(fā)表評(píng)論

0條評(píng)論

OnlyLing

男|高級(jí)講師

TA的文章

tensorflow.org

前端每日實(shí)戰(zhàn)：162# 視頻演示如何用原生 JS 創(chuàng)作一個(gè)查詢 github 用戶的應(yīng)用（內(nèi)含 2

vue配置多頁(yè)面

微信小程序?qū)崿F(xiàn)連接藍(lán)牙設(shè)備跑步APP

使用FormData對(duì)象上傳文件

styled-components 中文文檔翻譯及不完全指北

JS語(yǔ)句后加不加分號(hào)

angular2 NgModel` 模塊

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

狀態(tài)管理從0開(kāi)始[后續(xù)更新]

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！