Unspecified variables although I've used them - vue.js

Question

I have a site that I initially want to create an interface for SignUp and login, I created a page for Login with all the data needed to be placed, but this error appeared to me how can I handle it?
C:\Users\Super\Desktop\tatbekat\my-app\src\pages\Auth\login.vue
60:8 error 'axios' is defined but never used no-unused-vars
81:13 error 'success' is defined but never used no-unused-vars
84:14 error 'error' is defined but never used no-unused-vars
This is the login page that contains the login form and a set of data that must be set in addition to a special login function.
login.vue:
<template>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-alert color="error" :value="error" icon="close"> </v-alert>
<v-card-text>
<v-container>
<form #click="onLogin">
<v-layout row>
<v-flex xs12>
<v-text-field
name="email"
label="Email"
id="email"
v-model="loginUser.email"
type="text"
color="#43A047"
required
>
{{ email }}
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
name="password"
label="Password"
id="password"
v-model="loginUser.password"
type="password"
color="#43A047"
required
>
{{ password }}
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-btn class="green darken-1 color">
Sign In
</v-btn>
</v-flex>
</v-layout>
</form>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import { mapActions } from 'vuex'
import axios from "axios";
export default {
data() {
return {
loginUser: {
email: "",
password: "",
error: false
},
};
},
method: {
...mapActions([
'LOGIN'
]),
onSignIn(){
this.$store.dispatch('LOGIN',{
email:this.loginUser.email,
password:this.loginUser.password
})
.then(success=>{
this.$router.push("/")
})
.catch(error => {
this.error = true
})
}
},
};
</script>
<style scoped>
.color {
color: #fafafa;
}
</style>
And in this file, they wrote the necessary actions for the login and signup process.
user-store.js:
import axios from "axios";
export default {
state: {},
getters: {},
mutations: {},
actions: {
SIGNUP: (/*{ commit },*/ payload) => {
return new Promise((resolve, reject) => {
axios.post(`/signup` , payload)
.then(({/*data ,*/ status }) => {
if (status === 200){
resolve(true)
}
})
.catch(error =>{
reject(error)
})
});
},
LOGIN: (/*{ commit },*/ payload) => {
return new Promise((resolve, reject) => {
axios.post(`/signin` , payload)
.then(({/*data ,*/ status }) => {
if (status === 200){
resolve(true)
}
})
.catch(error =>{
reject(error)
})
});
},
},
};

Answer 1

All the errors are coming from login.vue file:.
axios: you have imported axios in login.vue but the actual axios calling is in the store file so the axios in login.vue is not used and you can delete the import.
success: in onSignIn method in login.vue you didn't use success in then call back so you can rewrite it like this:.
.then(() => {this.$router.push('/')}).
error: like the previous one you can rewrite catch block in login.vue like this:.
.catch(() => {this.error = true})