Pinia组合式API中registerUser函数如何实现路由跳转

问题分析 #

你在将Pinia认证Store从Options API改为组合式API后，registerUser函数里的router.push('/')无法正常工作，核心原因是组合式API的Pinia Store不会自动注入路由实例，直接使用未正确导入的router变量会导致引用错误。

正确实现方式 #

1. 导入路由实例 #

首先确保你的项目中已创建路由实例（通常在src/router/index.js），然后在Store文件中直接导入该实例：

import { defineStore } from 'pinia'
import { ref } from 'vue'
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "firebase/auth";
import { auth } from "@/firebase";
// 导入你的路由实例，路径根据实际项目调整
import router from '@/router'

export const useStoreAuth = defineStore('storeAuth', () => {
  // 定义状态
  const user = ref(null)

  // 初始化监听用户状态
  const init = () => {
    onAuthStateChanged(auth, (firebaseUser) => {      
      if (firebaseUser) {
        user.value = {
          id: firebaseUser.uid,
          email: firebaseUser.email
        }
      } else {
        user.value = null
      }
    });
  }

  // 注册用户并跳转
  const registerUser = (credentials) => {
    createUserWithEmailAndPassword(auth, credentials.email, credentials.password)
      .then((userCredential) => {
        const firebaseUser = userCredential.user 
        // 使用导入的路由实例执行跳转
        router.push('/')     
      })
      .catch((error) => {
        console.log('Error while registering:', error.message);
      });
  }

  // 导出状态和方法
  return { user, init, registerUser }
})

2. 路由实例导出确认 #

确保你的路由文件中正确导出了创建好的路由实例：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  // 你的路由配置，比如首页路由
  { path: '/', name: 'Home', component: () => import('../views/Home.vue') }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

错误排查方向 #

如果跳转仍失效，检查以下内容：

• 控制台是否存在router is not defined报错，若有则说明路由实例导入路径错误。
• 确认路由配置中存在'/'对应的路由规则。
• 在registerUser的then回调中打印firebaseUser，验证Firebase注册是否成功执行。

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