vue.js 中的登录表单返回未定义

Question

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?

Answer 1

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