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 >
           <div >
                <v-form
                  ref="form"
                  
                  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"
                    
                    @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

CodePudding user response：

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

 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)
                        }
                    )
                },
            }