修改 Pinia 存储 (组合 API) 的路由。

huangapple go评论59阅读模式
英文:

Pinia store (composition api) modify route

问题

I have translated the code portions for you:

我正在使用:

    vue@3.2.47
    pinia@2.0.35
    vue-router@4.1.6

我已经为使用 Firebase 数据库的身份验证创建了一个 store。代码如下:

    import { defineStore } from 'pinia'
    import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "firebase/auth";
    import { auth } from "@/firebase";
    
    export const useStoreAuth = defineStore('storeAuth', {
      state: () => {
        return {
          user: null,
        }
      },
      actions: {
        init() {
          onAuthStateChanged(auth, (user) => {      
            if (user) {
              this.user = {}
              this.user.id = user.uid
              this.user.email = user.email
            } else {
              this.user = null
            }
          });
        },
        registerUser(credentials) {
          createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
            const user = userCredential.user 
            this.router.push('/')
          }).catch((error) => {
            console.log('Error while registering:', error.message);
            }
          });
        },...

Here's the rewritten code using the composition API:

我想重写我的代码,使用组合 API,但是当我这样做时,我不明白如何重写我的代码,以便函数 registerUser(credentials) 可以使用 this.router.push。

我尝试重写它如下:

    const registerUser = (credentials) => {
        createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
          const firebaseUser = userCredential.user 
          router.push('/')
        }).catch((error) => {
          console.log('注册时出错:', error.message);
          }
        });
      }

但在这种情况下它不起作用...

I've provided the translation for the code portions you requested.

英文:

I am using:

vue@3.2.47
pinia@2.0.35
vue-router@4.1.6

I have created a store for the authentication with a firebase db. The code is as follow:

import { defineStore } from 'pinia'
import { createUserWithEmailAndPassword,signInWithEmailAndPassword,signOut,onAuthStateChanged  } from "firebase/auth";
import { auth } from "@/firebase";

export const useStoreAuth = defineStore('storeAuth', {
  state: () => {
    return {
      user: null,
    }
  },
  actions: {
    init() {
      onAuthStateChanged(auth, (user) => {      
        if (user) {
          this.user = {}
          this.user.id = user.uid
          this.user.email = user.email
        } else {
          this.user = null
        }
      });
    },
    registerUser(credentials) {
      createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
        const user = userCredential.user 
        this.router.push('/')     
      }).catch((error) => {
        console.log('Error while registering:',error.message);
        }
      });
    },...

I am using this.router.push in order to go to the home page after successful registration.

I would like to rewrite my code using the composition API but when I do, I don't understand how to rewrite my code so that the function registerUser(credentials) can use this.router.push.

I have tried to rewrite it like this:

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);
      }
    });
  }

but it is not working in this case...

答案1

得分: 1

In composition api, you can use router with useRouter:

import { useRouter } from "vue-router";

const router = useRouter();

...andyourcode...

See this page, official Vue Router site.

英文:

in composition api, you can use router with useRouter

import { useRouter } from "vue-router";

const router = useRouter();

...andyourcode...

see this page , official vue router site.

答案2

得分: 1

你可以将路由器作为registerUser()的参数传递。

在你的组件中:

import { useRouter } from "vue-router";
const router = useRouter();
...
registerUser(credentials, router);

在你的存储中:

const registerUser = (credentials, router) => {
  createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
    const firebaseUser = userCredential.user;
    router.push('/');
  }).catch((error) => {
    console.log('注册时出错:', error.message);
  });
}
英文:

You could pass router as an argument of registerUser()

In your component

import { useRouter } from "vue-router";
const router = useRouter();
...
registerUser(credentials, router);

In your store

const registerUser = (credentials, router) => {
    createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
      const firebaseUser = userCredential.user 
      router.push('/')     
    }).catch((error) => {
      console.log('Error while registering:',error.message);
      }
    });
  }

huangapple
  • 本文由 发表于 2023年5月17日 15:33:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/76269572.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定