Code for this can be found in theGithub Branch
This is a continuation from the registration functionality that Isetup up in Vuex. This post will now create a simple form for registering the user in firebase using that function.
src/views/Register.vue
<template> <div> <label for="username">Username</label> <input type="text" name="username" v-model="username" /> </div> <div> <label for="email">Email</label> <input type="email" name="email" v-model="email" /> </div> <div> <label for="password">Password</label> <input type="password" name="password" v-model="password" /> </div> <button @click="registerUser">Register</button></template><script>import { mapActions } from 'vuex';export default { data() { return { username: '', email: '', password: '', }; }, methods: { ...mapActions('auth', ['register']), registerUser() { const userData = { username: this.username, email: this.email, password: this.password, }; this.register(userData); }, },};</script>Other than the standard Vue features I'm using there is a cool little use of the spread operator and one of Vuex's best features. Instead of having to have to try and traverse the context and state I usemapActions. This is then added to the methods and I can use is as a normal method in the file. Pretty cool. This will register the user and on success re-direct the user back to the homepage.
Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
