Using Vue3, Pinia and Vue-Router Pluging and resolving this.router typescript errors

[scott-davidjones]

Hello,

After setting up Vue3, vue-router and Pinia using the composition API (for bothj vue3 and Pinia store) I am getting the following error in typescript:

Code:

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';    
import { User } from '@/types/User';
import authService from '@/services/auth';

// You can name the return value of `defineStore()` anything you want,
// but it's best to use the name of the store and surround it with `use`
// and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application
export const useAuthStore = defineStore('auth', () => {
    // const router = useRouter();
    const user = ref<User|null>(null);
    const isLoggedIn = computed<boolean>(() => user.value !== null);
    const errors = ref<string[]>([]);

    const handleError = (error: any) => {
        if (Object.hasOwnProperty.call(error.response.data, 'errors')) {
            for (const key in error.response.data.errors) {
                errors.value.push(error.response.data.errors[key][0]);
            }
        } else if (Object.hasOwnProperty.call(error.response.data, 'message')) {
            errors.value.push(error.response.data.message);
        } else {
            errors.value.push(error.message);
        }
    };

    function setUser(newUser: User) {
        user.value = newUser;
    }

    function logout() {
        authService.logout().finally(() => {
            user.value = null;
        });

        this.router.push({ name: 'login' });
    }

    function login(email: string, password: string): void {
        errors.value.length = 0;
        authService.login(email, password).then(response => {
            user.value = response.data;
        }).catch(handleError);
    }

    function validate(): void {
        authService.validate().then(response => {
            user.value = response.data;
        }).catch(() => {
            user.value = null;
        });
    }

    function changePassword(password: string, password_confirmation: string) {
        errors.value.length = 0;
        authService.changePassword(password, password_confirmation).then(response => {
            user.value = response.data;
        }).catch(handleError);
    }

    function changeEmail(email: string, email_confirmation: string) {
        errors.value.length = 0;
        authService.changeEmail(email, email_confirmation).then(response => {
            user.value = response.data;
        }).catch(handleError);
    }

    return {
        user,
        errors,
        isLoggedIn,
        setUser,
        login,
        logout,
        validate,
        changePassword,
        changeEmail
    };
});

The TS error relates to the logout function:

function logout() {
        authService.logout().finally(() => {
            user.value = null;
        });

        this.router.push({ name: 'login' });
    }

and the error being:

'this' implicitly has type 'any' because it does not have a type annotation.ts(2683)
useAuthStore.ts(33, 14): An outer value of 'this' is shadowed by this container.

Other than using /** @ts-ignore */ which produces a compiler error (which i dont want to ignore) is there a way to define this in a composition API created store?

I could disable noImplicitThis but this goes against the docs: https://pinia.vuejs.org/core-concepts/state.html#typescript

I cannot find an answer to this question that doesnt involve the options API.

[scott-davidjones]

further to this, i have setup the vue-router following the exampel on this page: https://pinia.vuejs.org/core-concepts/plugins.html#adding-new-external-properties

const pinia = createPinia();
pinia.use(({ store }) => {
    store.router = markRaw(router);
});

const app = createApp(App);
app.component('FontAwesomeIcon', FontAwesomeIcon);
app.use(pinia);
app.use(router);

[ramsesmoreno]

There is no this in Composition API. What you could do is uncomment the const router = useRouter(); and just call router.push({ name: 'login' }); But I imagine you need to define the router state property in a plugin?

[leochen-g]

when I use const router = useRouter();, there has warning inject() can only be used inside setup() or functional components.

vue: 3.3.4
pinia: 2.1.4

[scott-davidjones]

this is the right answer (sorry i didnt see this earlier)

[scott-davidjones]

when I use const router = useRouter();, there has warning inject() can only be used inside setup() or functional components.

vue: 3.3.4 pinia: 2.1.4

can you share a code snippet?