master

Branches (1)

Manage

Manage

master

mfox
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>mfox demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <button class="update_web">Update</button>
    <script src="mfox.window.js"></script>
    <!-- <script src="mfox.extend.service-worker.js"></script> -->
    <!-- <script src="mfox.extend.query.js"></script> -->
    <script>
        const { createStore, loadModule, createSWStore } = mfox;

        /* const swStore = createSWStore({
            module: "./service-worker.js",
            updated() {
                let dom = document.createElement("div");
                let themeColor = document.querySelector("meta[name=theme-color]");
                themeColor && (themeColor.content = "#000");
                dom.innerHTML = `
                     <style>
                         .app-refresh{cursor:pointer;background:rgba(0,0,0,.8);height:0;line-height:52px;overflow:hidden;position:fixed;top:0;left:0;right:0;z-index:10001;padding:0 18px;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;}
                         .app-refresh-wrap{display:flex;color:#fff;font-size:15px;}
                         .app-refresh-wrap label{flex:1;}
                         .app-refresh-show{height:52px;}
                     </style>
                     <div class="app-refresh" id="app-refresh">
                         <div class="app-refresh-wrap" onclick="location.reload()">
                             <label>已更新最新版本</label>
                             <span>点击刷新</span>
                         </div>
                     </div>
                 `;
                document.body.appendChild(dom);
                setTimeout(
                    () =>
                    (document.getElementById("app-refresh").className +=
                        " app-refresh-show"),
                    16
                );
            },
        });

        console.log(swStore)

        const button = document.querySelector('.update_web')
        button.addEventListener('click', (e) => {
            swStore.update()
        }); */

        loadModule(["20201212", "20221212"], {
            base: "/modules",
            ext: '.js'
        }).then(modules => {
            const store = createStore({
                currentModule: '20221212',
                modules,
            })
            console.log(store)
            store.subscribe({
                before(mutations, state) {
                    console.log('mutations before', mutations, state)
                },
                after(mutations, state) {
                    console.log('mutations after', mutations, state)
                },
                error(error) {
                    console.log('mutations error', error)
                }
            })
            store.subscribeAction((actions, state) => {
                console.log('actions after', actions, state)
            }, {
                prepend: false
            })
            store.subscribeGetter({
                before(value, state) {
                    console.log('getter before', value, state)
                },
                after(value, state) {
                    console.log('getter after', value, state)
                },
                error(error) {
                    console.log('getter error', error)
                }
            })
            store.commit('setAValue', 2).then(() => {
                store.setState("e", 'b')
                store.dispatch('setAValue', 3).then(() => {
                    store.setState("e", 'bbb')
                    let res = store.queryState(/[0-9]+/)
                    res = store.queryState('bbb')
                    console.log(res)
                    res = store.mapState(['a', 'b', 'e'])
                    console.log(res)
                    store.registerModule('20221213', {
                        namespaced: true,
                        state: {
                            a: 3,
                            b: 'c',
                            c: null
                        },
                        mutations: {
                            setAValue(state, v) {
                                this.setState("a", this.computed('setAValue') + v)
                            }
                        },
                        actions: {
                            setAValue(store, v) {
                                store.commit('setAValue', v)
                            }
                        },
                        getters: {
                            setAValue(state) {
                                return state.a + 1
                            }
                        }
                    })
                    store.setState("e", 'ddd')
                    store.switchModule('20201212')
                    res = store.mapActions('setAValue')
                    res.setAValue(1)

                    store.hotUpdate({
                        modules: {
                            '20221212': {
                                state: {
                                    a: 5,
                                    b: 'f',
                                    c: null,
                                    d: '123'
                                },
                                mutations: {
                                    setAValue(state, v) {
                                        this.setState("a", this.computed('setAValue') + v)
                                    }
                                },
                                actions: {
                                    setAValue(store, v) {
                                        store.commit('setAValue', v)
                                    }
                                },
                                getters: {
                                    setAValue(state) {
                                        return state.a + 1
                                    }
                                }
                            }
                        }
                    })

                    store.cloneModule('20221212', '20221214')
                    store.cloneModule('20221212', '20221215', true)

                    const hasModule = store.hasModule('20221212')
                    console.log(hasModule)

                    console.log(store.modules)

                    console.log(store.logs)
                    store.switchModule('20221213')

                    const resState = store.mapState(['20221213/state/a', '20221212/state/a'])
                    console.log(resState)
                    const resActions = store.mapActions(['20221213/actions/setAValue', '20221212/actions/setAValue'])
                    console.log(resActions)

                    /* let queryRes = store.query(`select a, b from state source '20221213' and '20221212' where (state.a = 1 or state.a = 3) and (state.b = 'c' or state.b = 'f')`)
                    console.log(queryRes)
                    queryRes = store.query(`select setAValue from actions source '20221213' and '20221212'`)
                    console.log(queryRes) */

                }).catch(err => console.error(err))
            }).catch(err => console.error(err))
            //store.destroy()
        })
    </script>
</body>

</html>