wavelovers/src/App.vue

<template>
    <HeaderItem />
    <main class="page container">
        <div class="wavelovers">
            <router-view />
        </div>
    </main>
    <FooterItem />
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    import store from '@/store/index';
    import HeaderItem from '@/components/HeaderItem.vue';
    import FooterItem from '@/components/FooterItem.vue';

    export default defineComponent({
        name: 'App',
        components: {
            HeaderItem: HeaderItem,
            FooterItem: FooterItem,
        },
        methods: {
            addEventListeners(): void {
                window.addEventListener('gamepadconnected', (event: GamepadEvent) => store.dispatch('addGamepad', event));
                window.addEventListener('gamepaddisconnected', (event: GamepadEvent) => store.dispatch('deleteGamepad', event));
            },
            removeEventListeners(): void {
                window.removeEventListener('gamepadconnected', (event: GamepadEvent) => store.dispatch('addGamepad', event));
                window.removeEventListener('gamepaddisconnected', (event: GamepadEvent) => store.dispatch('deleteGamepad', event));
            },
        },
        mounted() {
            this.addEventListeners();
        },
        unmounted() {
            this.removeEventListeners();
        },
    });
</script>