fes.js/packages/fes-template/src/pages/store.vue

<template>
    <div class="page">
        <h4>Vuex</h4>
        <input />
        <div>
            <button @click="increment">click me：{{ doubleCount }}</button>
        </div>
        <div>
            <button :disabled="disabled" @click="login">async login</button>
        </div>
        <div>
            <button @click="fooBarIncrement">foo/bar：{{ fooBarDoubleCount }}</button>
        </div>
        <div>{{ address }}</div>
    </div>
</template>
<config>
{
    "name": "store",
    "title": "$store",
    "keep-alive": true
}
</config>
<script>
import { computed, ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
import { useStore } from 'vuex';
import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';

export default {
    setup() {
        console.log('store.vue');
        const store = useStore();
        console.log('store==>', store);
        const disabled = ref(false);

        onMounted(() => {
            console.log('onMounted');
        });

        onUnmounted(() => {
            console.log('onUnmounted');
        });

        onActivated(() => {
            console.log('onActivated');
        });

        onDeactivated(() => {
            console.log('onDeactivated');
        });

        return {
            address: computed(() => store.getters[GETTER_TYPES.user.address]),
            doubleCount: computed(() => store.getters[GETTER_TYPES.counter.doubleCount]),
            disabled,
            increment: () => store.commit(MUTATION_TYPES.counter.increment),
            login: () => {
                disabled.value = true;
                store.dispatch(ACTION_TYPES.user.login).then((res) => {
                    // eslint-disable-next-line no-alert
                    window.alert(res);
                    disabled.value = false;
                });
            },
            fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment),
            fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount]),
        };
    },
};
</script>
<style scoped>
.page {
}
</style>