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

Question

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

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

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

项目设置：

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

Answer 1

当你使用：

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

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