…mapActions in Vue-TypeScript application cause error

Question

I'm trying to create an auth feature in a Vue-Typescript application. For this feature, I have created a Vuex store module 'AuthModule'. I have mapped the Vuex actions to the class component methods. But when I calling these actions from other class methods, it throws error like below.

Property 'login' does not exist on type 'AuthView'.
    70 |                 rememberMe: this.rememberMe
    71 |             };
  > 72 |             this.login(user)
       |              ^
    73 |                 .then(() => this.$router.push('/home'))
    74 |                 .catch(err => console.log(err))
    75 |         }

AuthModule Store

import {Action, Module, Mutation, VuexModule, getModule} from "vuex-module-decorators";
import Api from "@/helpers/Api";
import axios from "axios";
import User from "@/dao/User";
import store from '@/store'


@Module({dynamic: true, store, name: "AuthModule", namespaced: true})

class AuthModule extends VuexModule {
    public token = localStorage.getItem('token') || '';
    public status = '';
    public user = new User();
    public isLoggedIn = false;

    @Mutation
    public authRequest(): void {
        this.status = 'loading'
    }

    @Mutation
    public authSuccess(token: string, user: User): void {
        this.token = token;
        this.user = user;
        this.isLoggedIn = true;
    }

    @Mutation
    public authError() {
        this.status = 'error'
    }

    @Action({rawError: true})
    public login(user: any) {
        return new Promise((resolve, reject) => {
            this.context.commit('authRequest');
            return Api.post('/auth/login', user)
                .then(resp => {
                    const token = resp.data.accessToken;
                    const user = new User();
                    user.firstName = resp.data.firstName;
                    user.lastName = resp.data.lastName;
                    user.UserId = resp.data.userId;
                    localStorage.setItem('token', token);
                    Api.defaults.headers.common['Authorization'] = 'Bearer ' + token;
                    this.context.commit('authSuccess', {token, user});
                    resolve(resp)
                })
                .catch(err => {
                    this.context.commit('authError');
                    localStorage.removeItem('token');
                    reject(err)
                })
        })
    }
}

store index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import {authModule} from "./auth/AuthModule";

Vue.use(Vuex);


export default new Vuex.Store({
    modules: {
        authModule
    }
})

Login.ts

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator'
    import {mapActions} from "vuex";

    @Component({
        methods: {
            ...mapActions('authModule', ['login'])
        }
    })
    export default class AuthView extends Vue {
        private email = "";
        private password = "";
        private rememberMe = "";

        public login(user:object) {};

        performLogin() {
            const user = {
                email: this.email,
                password: this.password,
                rememberMe: this.rememberMe
            };
            this.login(user)
                .then(() => this.$router.push('/home'))
                .catch(err => console.log(err))
        }
    }
</script>

if anyone hits an issue like this please suggest a solution.

Answer 1

In your AuthModule.store , you should be using getModule to export the store, ie:

export const authModuleStore = getModule(AuthModule);

Then, you can simply import authModuleStore directly in your component and reference its methods directly:

import { authModuleStore } from '/path/to/authModule.store';

export default class AuthView extends Vue {
    private email = "";
    private password = "";
    private rememberMe = "";

    public login(user:object) {};

    performLogin() {
        const user = {
            email: this.email,
            password: this.password,
            rememberMe: this.rememberMe
        };
        authModuleStore .login(user)
            .then(() => this.$router.push('/home'))
            .catch(err => console.log(err))
    }
}