I'm trying to build a simple login/register form using Vuex to store user array. The register works, and creates a new Json object in the array. The problem is the Login because when i try to ask Vuex if a user with a specific username exists it returns me Undefined.
Vuex store code:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
users:[],
dataset:[]
},
mutations: {
addUser(state,user){
state.users.push(user);
},
addData(state,newData){
state.dataset = newData;
}
},
getters:{
getDataset: state =>{
return state.dataset;
},
getUsers: (state) =>(username) =>{
for(let i = 0; i < state.users.length(); i++){
if(state.users[i].username === username){
return i;
}
}
return -1;
}
}
,
actions: {},
modules: {},
});
Login Code:
<template>
<v-container class="my-16">
<h2 class="text-center">Per iniziare effettua il login!</h2>
<div class="text-center">
<v-dialog
v-model="dialog"
width="500"
persistent>
<template v-slot:activator="{ on, attrs }">
<v-btn
text
color="black"
v-bind="attrs"
v-on="on"
> <v-icon>mdi-login</v-icon>
Login
</v-btn>
</template>
<v-tabs v-model="tab" show-arrows background-color="primary" icons-and-text grow>
<v-tabs-slider color="green darken-4"></v-tabs-slider>
<v-tab v-for="tab in tabs" :key="tab.title">
<v-icon large>{{ tab.icon }}</v-icon>
<div class="caption py-1">{{ tab.title }}</div>
</v-tab>
<v-tab-item>
<v-card>
<v-card-text>
<v-form ref="formLogin" v-model="validLogin" >
<v-text-field label="Username" v-model="usernameLogin" prepend-icon="mdi-account-outline" :rules="nameRules"></v-text-field>
<v-text-field hint="At least 8 characters"
:type="show1 ? 'text' : 'password'"
:append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
label="Password" v-model="passwordLogin"
prepend-icon="mdi-lock-outline"
:rules="passwordRules"
@click:append="show1 = !show1"></v-text-field>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="warning"
text
@click="clearLogin"
>
Clear
</v-btn>
<v-btn
color="error"
text
@click="cancelLogin"
>
Cancel
</v-btn>
<v-btn
color="success"
text
:disabled="!validLogin"
@click="submitLogin"
>
Login
</v-btn>
</v-card-actions>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card>
<v-card-text>
<v-form ref="form" v-model="validRegister" >
<v-text-field label="Name" v-model="name" prepend-icon="mdi-information-outline" :rules="nameRules"></v-text-field>
<v-text-field label="Lastname" v-model="lastname" prepend-icon="mdi-information-outline" :rules="nameRules"></v-text-field>
<v-text-field label="Username" v-model="usernameRegister" prepend-icon="mdi-account-outline" :rules="nameRules"></v-text-field>
<v-text-field hint="At least 8 characters"
:type="show1 ? 'text' : 'password'"
:append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
label="Password"
v-model="passwordRegister"
prepend-icon="mdi-lock-outline"
:rules="passwordRules"
@click:append="show1 = !show1"></v-text-field>
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="dateOfBirth"
transition="scale-transition"
offset-y
min-width="auto"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="dateOfBirth"
label="Date of Birth"
prepend-icon="mdi-calendar-outline"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="dateOfBirth"
no-title
scrollable
>
<v-spacer></v-spacer>
<v-btn
text
color="error"
@click="menu = false"
>
Cancel
</v-btn>
<v-btn
text
color="success"
@click="$refs.menu.save(dateOfBirth)"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
<v-textarea :counter="maxDescription" :rules="descriptionRules" label="Description" v-model="description" prepend-icon="mdi-pencil-outline"></v-textarea>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="warning"
text
@click="clearRegister"
>
Clear
</v-btn>
<v-btn
color="error"
text
@click="cancelRegister"
>
Cancel
</v-btn>
<v-btn
color="success"
text
:disabled="!validRegister"
@click="submitRegister"
>
Register
</v-btn>
</v-card-actions>
</v-card>
</v-tab-item>
</v-tabs>
</v-dialog>
</div>
</v-container>
</template>
<script>
export default {
data(){
return{
tab: 0,
validLogin: true,
validRegister:true,
show1: false,
dialog: false,
usernameLogin:'',
passwordLogin:'',
usernameRegister:'',
passwordRegister:'',
menu: false,
minName: 3,
minPassword: 8,
name:'',
lastname:'',
description:'',
dateOfBirth:'',
maxDescription: 150,
descriptionRules:[
v => v.length <= this.maxDescription || 'Max number of characters is 150'
],
nameRules: [
v => v.length >= this.minName || 'Minimum lenght is 3 characters'
],
passwordRules: [
v => v.length >= this.minPassword || 'Minimum lenght is 8 characters'
],
tabs:[
{title:"Login", icon:"mdi-account"},
{title:"Register", icon:"mdi-account-plus-outline"}
]
}
},
methods:{
submitRegister() {
if(this.$refs.form.validate()){
const user = {
name: this.name,
lastname: this.lastname,
username: this.usernameRegister,
password: this.passwordRegister,
description: this.description,
dateOfBirth: this.dateOfBirth
}
this.$store.commit('addUser',user);
this.cancelRegister ();
}
},
submitLogin() {
if(this.$refs.formLogin.validate()){
let user = this.usernameLogin;
console.log(user);
var index = this.$store.getters['getUsers',user];
console.log(index);
if(index != undefined){
this.$router.push('dashboard');
}
}
},
cancelRegister() {
this.$refs.form.reset();
this.validRegister = false;
this.dialog = false;
},
cancelLogin() {
this.$refs.formLogin.reset();
this.validLogin = false;
this.dialog = false;
},
clearRegister() {
this.$refs.form.reset();
this.validRegister = false;
},
clearLogin () {
this.$refs.formLogin.reset();
this.validLogin = false;
},
},
}
</script>
The method that doesn't work properly is submitLogin().
How can i solve that problem?
submitLogin()
does not invoke the getUsers
function correctly. The function should be called with parentheses:
var index = this.$store.getters['getUsers',user]; ❌
var index = this.$store.getters['getUsers'](user); ✅