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

Posted 2023-02-23

【中文标题】... Vue-TypeScript 应用程序中的 mapActions 导致错误

【英文标题】：...mapActions in Vue-TypeScript application cause error

【发布时间】：2020-07-18 13:44:28

【问题描述】：

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

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
    
)

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>

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

【参考方案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))
    

【讨论】：

这是解决上述问题的另一种方法。我被接受并且之前已经实施过。但是有没有可能在我的类组件中使用...mapActions？

我认为 mapActions 的主要问题是 TypeScript 无法检测到其中声明的任何内容都可以映射为方法，即从 @Component 声明中查找类型时遇到问题

我认为最好的方法是你的答案。但我正在使用动态存储模块。所以我不能在 main.ts 中使用这些模块（即 Vue 应用程序的启动脚本）。抛出很多错误。