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

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

Pinia store (composition api) modify route

问题

I have translated the code portions for you:

  1. 我正在使用:
  2. vue@3.2.47
  3. pinia@2.0.35
  4. vue-router@4.1.6
  5. 我已经为使用 Firebase 数据库的身份验证创建了一个 store。代码如下:
  6. import { defineStore } from 'pinia'
  7. import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "firebase/auth";
  8. import { auth } from "@/firebase";
  9. export const useStoreAuth = defineStore('storeAuth', {
  10. state: () => {
  11. return {
  12. user: null,
  13. }
  14. },
  15. actions: {
  16. init() {
  17. onAuthStateChanged(auth, (user) => {
  18. if (user) {
  19. this.user = {}
  20. this.user.id = user.uid
  21. this.user.email = user.email
  22. } else {
  23. this.user = null
  24. }
  25. });
  26. },
  27. registerUser(credentials) {
  28. createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
  29. const user = userCredential.user
  30. this.router.push('/')
  31. }).catch((error) => {
  32. console.log('Error while registering:', error.message);
  33. }
  34. });
  35. },...

Here's the rewritten code using the composition API:

  1. 我想重写我的代码,使用组合 API,但是当我这样做时,我不明白如何重写我的代码,以便函数 registerUser(credentials) 可以使用 this.router.push
  2. 我尝试重写它如下:
  3. const registerUser = (credentials) => {
  4. createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
  5. const firebaseUser = userCredential.user
  6. router.push('/')
  7. }).catch((error) => {
  8. console.log('注册时出错:', error.message);
  9. }
  10. });
  11. }
  12. 但在这种情况下它不起作用...

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

英文:

I am using:

  1. vue@3.2.47
  2. pinia@2.0.35
  3. vue-router@4.1.6

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

  1. import { defineStore } from 'pinia'
  2. import { createUserWithEmailAndPassword,signInWithEmailAndPassword,signOut,onAuthStateChanged } from "firebase/auth";
  3. import { auth } from "@/firebase";
  4. export const useStoreAuth = defineStore('storeAuth', {
  5. state: () => {
  6. return {
  7. user: null,
  8. }
  9. },
  10. actions: {
  11. init() {
  12. onAuthStateChanged(auth, (user) => {
  13. if (user) {
  14. this.user = {}
  15. this.user.id = user.uid
  16. this.user.email = user.email
  17. } else {
  18. this.user = null
  19. }
  20. });
  21. },
  22. registerUser(credentials) {
  23. createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
  24. const user = userCredential.user
  25. this.router.push('/')
  26. }).catch((error) => {
  27. console.log('Error while registering:',error.message);
  28. }
  29. });
  30. },...

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:

  1. const registerUser = (credentials) => {
  2. createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
  3. const firebaseUser = userCredential.user
  4. router.push('/')
  5. }).catch((error) => {
  6. console.log('Error while registering:',error.message);
  7. }
  8. });
  9. }

but it is not working in this case...

答案1

得分: 1

In composition api, you can use router with useRouter:

  1. import { useRouter } from "vue-router";
  2. const router = useRouter();
  3. ...andyourcode...

See this page, official Vue Router site.

英文:

in composition api, you can use router with useRouter

  1. import { useRouter } from "vue-router";
  2. const router = useRouter();
  3. ...andyourcode...

see this page , official vue router site.

答案2

得分: 1

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

在你的组件中:

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

在你的存储中:

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

You could pass router as an argument of registerUser()

In your component

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

In your store

  1. const registerUser = (credentials, router) => {
  2. createUserWithEmailAndPassword(auth, credentials.email, credentials.password).then((userCredential) => {
  3. const firebaseUser = userCredential.user
  4. router.push('/')
  5. }).catch((error) => {
  6. console.log('Error while registering:',error.message);
  7. }
  8. });
  9. }

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:

确定