Proxy使用例

JavaScriptのProxyを使って、状態の変更を通知できるゲッターとセッターを作ってみた。
state.key = valueのようにセットして、state.keyでゲットします。

state = new Proxy({}, {
    get(target, key){
        return JSON.parse(target[key]);
    },
    set(target, key, value){
        target[key] = JSON.stringify(value);
        dispatchEvent(new CustomEvent(`state.${key}`));
    },
});

• 変更時にイベントが発生することで通知します。イベント名はstate.キー名、発生源はwindow
• 内部状態をJSONで持っているので、変更を確実に検知できます
• stateの全キーはfor-inループで取り出せます