英文:
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);
}
});
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论