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

【问题标题】：Vue navigation with vue-router in Store using TypeScript and FirebaseAuthUI使用 TypeScript 和 FirebaseAuthUI 在 Store 中使用 vue-router 进行 Vue 导航
【发布时间】：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()？

标签： typescript vue.js firebase-authentication vuex vue-router

【解决方案1】：

当你使用时：

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

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

【讨论】：

当然，- 我的错。感谢您指出了这一点。重新加载 mypage 时发生浏览器错误（它已经在该页面上并尝试再次推送 mypage）。但是，我仍然对 TS 错误感到困惑，知道如何告诉 TypeScript this.$router 吗？
你的 index.ts 中定义了 store 吗？
是的，这是由 Quasar CLI 项目创建完成的。
那我不知道。对不起。但是至少修复路线重复路线很好
也许这个stackoverflow.com/a/54155543/7629020 是关于路由器的，但似乎是类似的错误模式