如何在Pinia Store中使用Vue-Router？TypeScript类型报错解决

要让TypeScript识别Pinia Store中注入的router属性，你需要扩展Pinia的自定义类型声明，具体步骤如下：

1. 创建Pinia类型声明文件 #

在项目的src目录下新建pinia.d.ts文件（或在已有类型文件中添加），内容如下：

import type { Router } from 'vue-router';

declare module 'pinia' {
  export interface PiniaCustomProperties {
    router: Router;
  }
}

这段声明会告诉TypeScript：所有Pinia Store实例都将拥有一个类型为Router的router属性。

2. 确保TypeScript识别该声明文件 #

检查你的tsconfig.json，确认include数组包含了这个类型文件，示例配置如下：

{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3. 在认证Store中正常使用router #

现在你可以在Store里安全调用this.router，TypeScript会自动识别其类型，示例代码：

import { defineStore } from 'pinia';

interface AuthState {
  user: { id: string; email: string } | null;
}

export const useAuthStore = defineStore('storeAuth', {
  state: (): AuthState => ({
    user: null,
  }),
  actions: {
    loginUser(credentials: { email: string; password: string }) {
      // 这里编写Firebase登录逻辑
      // 登录成功后跳转页面
      this.router.push('/dashboard');
    },
    logoutUser() {
      this.user = null;
      this.router.push('/login');
    },
  },
});

额外提示 #

• 建议把credentials的any类型替换成具体的接口（比如上面的{ email: string; password: string }），提升代码的类型安全性。
• 确保已正确安装vue-router，其类型包会随依赖自动安装。

内容的提问来源于stack exchange，提问作者J4N