使用 TypeScript 和 FirebaseAuthUI 在 Store 中使用 vue-router 进行 Vue 导航

Posted 2023-03-13

【中文标题】使用 TypeScript 和 FirebaseAuthUI 在 Store 中使用 vue-router 进行 Vue 导航

【英文标题】：Vue navigation with vue-router in Store using TypeScript and FirebaseAuthUI

【发布时间】：2020-10-23 08:01:45

【问题描述】：

我正在尝试学习 Vue.js，并使用 Quasar CLI 创建了一个支持 TypeScript 的 Quasar (Vue) 项目。

我正在使用 FirebaseAuthUI 进行身份验证，并创建了一个名为 firebase.ts 的引导文件。 FirebaseAuth 有一个“onAuthStateChanged”，每次用户登录或注销时都会调用它。 'onAuthStateChanged' 方法作为存储操作 (handleAuthStateChanged) 放置。

我的问题是无法在 store.ts 文件中使用 Typescript 访问 this.$router。使用商店操作中的导航是错误的吗？这是打字稿问题吗？还是我忽略了什么？

项目设置：

'handleAuthStateChanged' 在 App.vue 中注册

///App.vue

<script lang="ts">
import  mapActions  from 'vuex';

export default 
  methods: 
    ...mapActions('userStore', ['handleAuthStateChanged'])
  ,
  mounted() 
    this.handleAuthStateChanged();
  
;
</script>

///store.ts

const actions = 
  handleAuthStateChanged( commit :  commit: any ) 
    
    firebaseAuth.onAuthStateChanged(user => 
      if (user) 
        // User is logged in
    
        this.$router.push('/myPage'); //$router shows Typescript ERROR, but works???
       else 
        // User is logged out
        
        this.$route.push('/login'); //$router shows Typescript ERROR, but works???
      
    );
  ,
  logoutUser() 
    firebaseAuth.signOut();
  
;

VScode 中的错误信息：

Property '$router' does not exist on type ' handleAuthStateChanged( commit :  commit: any; ): void; logoutUser(): void; '.ts(2339)

【问题讨论】：

你有没有设法修复由 eslint 引起的实际 TS 错误。特别是在 App.vue 中以类型安全的方式使用“this”：mounted()？

【参考方案1】：

当你使用时：

          this.$router.push('/myPage'); //$router shows Typescript ERROR, but works???

您应该首先检查您正在推送的路线是否还不是当前路线。

【讨论】：

当然，- 我的错。感谢您指出了这一点。重新加载 mypage 时发生浏览器错误（它已经在该页面上并尝试再次推送 mypage）。但是，我仍然对 TS 错误感到困惑，知道如何告诉 TypeScript this.$router 吗？

你的 index.ts 中定义了 store 吗？

是的，这是由 Quasar CLI 项目创建完成的。

那我不知道。对不起。但是至少修复路线重复路线很好

也许这个***.com/a/54155543/7629020 是关于路由器的，但似乎是类似的错误模式