index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StoreJs</title>
</head>
<body>
    <script type="module" src="store.js"></script>
    <script type="module">
        import {storeSetup, storeGetters, storeActions} from '/store.js'
        let state = () => ({
            data: {
                name: 'emeka'
            },
            age: 20
        });

        let getters = {
            getData: (state) => {
                return state.data;
            },
            getAge: (state) => {
                return state.age;
            }
        }

        let actions = {
            multiplyAge: () => {
                return {
                    method: 'text',
                    arguments: 'payload'
                }
            },
        }

        let mutations = {
            text: (state, {payload}) => {
                state.age *= payload.first;
                state.age /= payload.second
            }
        }

        let store = {
            state,
            getters,
            actions,
            mutations
        };

        storeSetup({
            store
        })
        let get = storeGetters({
            data: "getData",
            age: 'getAge'
        });
        console.log(get)
        // age == 20, data == {name: 'emeka'}

        let act = storeActions({
            'multiplyAge' : { first:30, second: 2 }
        })

        let ge = storeGetters({
            age: 'getAge'
        });

        console.log(ge)
        // 300

    </script>
</body>
</html>