... Vue-TypeScript 应用程序中的 mapActions 导致错误

Question

我正在尝试在 Vue-Typescript 应用程序中创建身份验证功能。 对于这个特性，我创建了一个 Vuex 存储模块“AuthModule”。 我已将 Vuex 操作映射到 class 组件方法。 但是当我从其他 class 方法调用这些操作时，它会引发如下错误。

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 商店

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)
                })
        })
    }
}

存储 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
    }
})

登录.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>

如果有人遇到这样的问题，请提出解决方案。

Answer 1

在您的AuthModule.store中，您应该使用getModule来导出商店，即：

export const authModuleStore = getModule(AuthModule);

然后，您可以直接在组件中导入authModuleStore并直接引用其方法：

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))
    }
}