Am trying to submit a form from vuex to laravel and also register a token to the localStorage.
In my form I have a submit method which sends the data to store,js actions.
The form is a registration form and am able to capture the details to the backend. Am also getting a feedback from the backend validation
For example
{"success":true,"data":{"name":"saf,jdfn","token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzIiwianRpIjoiYjc2ZDgzNjUzNDg0ZDA4OGRiMjMyOTIxZjViNjc3YzlkN2Q0ZeMbU31lGkD8pirH1JtQr1ZKL1S6eYuscQUUhKOnFodEum3Z4G1gGyHJ27UK1KzjnL3M"},"message":"Yay! A user has been successfully created."}
I also want to store access token to localStorage
<template lang="en">
<div class="body">
<div class="cont">
<v-form
ref="form"
class="form sign-in"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="form.name"
:counter="10"
outlined
:rules="nameRules"
label="Name"
required
></v-text-field>
<v-text-field
v-model="form.email"
:rules="emailRules"
label="E-mail"
outlined
required
></v-text-field>
<v-text-field
v-model="form.password"
outlined
type="password"
:rules="passRules"
label="Password"
required
append-icon="mdi-map-marker"
></v-text-field>
<v-text-field
v-model="form.confirm_password"
outlined
type="password"
:rules="passRules"
label="confirm password"
required
append-icon="mdi-map-marker"
></v-text-field>
<v-btn
:disabled="!valid"
color="success"
class="submit mr-8"
@click="submit"
>
Submit
</v-btn>
</v-form>
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
form:{
name: '',
email: '',
password: '',
confirm_password: ''
},
valid: true,
name: '',
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters',
],
email: '',
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
],
password: '',
passRules: [
v => !!v || 'Password is required',
v => (v && v.length >=8 ) || 'Name must be atleast 8 characters',
],
}),
methods: {
async submit () {
await this.$refs.form.validate();
this.$store.dispatch('registerUser', this.form);
},
},
}
</script>
In my store.js I have this code
actions: {
registerUser:(context, form) => {
axios.post('/api/register', form)
.then(
res=> {
this.res = res.data;
if(res.data.token){
localStorage.setItem(
'token',
res.data.token
)
}
}
) .catch(
err => {
console.log(err)
}
)
console.log(this.form)
},
Am not able to get the token to localstorage
First of all, I suggest you look at vuex and javascript scope topics. As far as I understand, your problem is with javascript scope. You don't need to use vuex just to save the token to localstorage.
actions: {
registerUser: (context, form) => {
axios.post('/api/register', form)
.then(
res => {
const tokenRes = res.data;
if (tokenRes.data.token) {
localStorage.setItem(
'token',
tokenRes.data.token
)
}
// Here you cannot call a data object in the vue component.
// If you are going to use it in the component, you need to save it in the state.
// console.log(this.form)
console.log(tokenRes)
}
).catch(
err => {
console.log(err)
}
)
},
}