how to pass variable between to vue file?

Question

how to pass variable between to vue file ? Hello, this is my file SendCode.vue has variable NewEmail which I want to use it in another file changePass.vue . Is there anyway to sole this ? Can someone help me ? Thanks

<template>
<v-app id="inspire">
    <v-content>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="8" md="4">
                    <v-card class="elevation-12">
                        <v-toolbar color="#ff8c00">
                            <v-toolbar-title>Glömt lösenord!</v-toolbar-title>
                        </v-toolbar>
                        <v-card-text>
                            Skrive  ditt email.

                            <v-form>
                                <v-text-field v-model="email"
                                              :error-messages="emailErrors"
                                              label="E-mail"
                                              required
                                              @input="$v.email.$touch()"
                                              @blur="$v.email.$touch()"></v-text-field>

                            </v-form>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer />
                            <v-btn @click="getCode" color="primary">Skicka koden</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-content>
</v-app>
</template>

<script>
import axios from 'axios'
  import router from '@/router.js'
  import { validationMixin } from 'vuelidate'
  import { required, email } from 'vuelidate/lib/validators'
export default {

    mixins: [validationMixin],
    validations: {
      email: { required, email },
      checkbox: {
        checked(val) {
          return val
        }
      }
  },
    props: {
        source: String,
    },


    data: () => ({
        email: ""
    }),
    methods: {
        getCode: async function() {
            let obj = {
                "email": this.email,
            };
            let NewEmail = this.email;
            let response = await this.$store.dispatch("getCode", obj);
            //console.log(email)
            //console.log(this.email)
            if (response.status == 200) {

                setTimeout(function() {
                    router.push({
                        path: 'ChangePass'
                   });
                }, 500);
        }

    }
    }
}
</script>

I want to use/pass variable NewEmail in this file from SendCode.vue file I am new in vue and javascript so I do not know how to do this.

<template>
<v-app id="inspire">
    <v-content>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="8" md="4">
                    <v-card class="elevation-12">
                        <v-toolbar color="#ff8c00">
                            <v-toolbar-title>ÄNDRA LÖSENORDET</v-toolbar-title>
                        </v-toolbar>
                        <v-card-text>
                            <v-form>
                                <v-text-field :error="pass1Error" label="Koden" v-model="code1" type="password" />
                                <v-text-field :error="pass2Error" label="Lössenord" v-model="newPassword" type="password" />
                                <v-text-field :error="pass1Error" label="Samma Lössenord" v-model="rePassword" type="password" />

                            </v-form>
                        </v-card-text>
                        <v-alert v-if="passError" type="error">
                            password are not same
                        </v-alert>
                        <v-alert v-if="passwordChanged" type="success">
                            Password has been updated!
                        </v-alert>
                        <v-card-actions>
                            <v-spacer />
                            <v-btn @click="change" color="primary">Ändra</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-content>
</v-app>
</template>


<script>
import axios from 'axios'
import SendCode from "@/views/SendCode.vue";


  import { validationMixin } from 'vuelidate'
  import { required, email } from 'vuelidate/lib/validators'

export default {
    mixins: [validationMixin],


    validations: {
      email: { required, email },
      checkbox: {
        checked(val) {
          return val
        }
      }
  },
    props: {
        source: String,
    },
    data: () => ({

        code1: "",
        newPassword: "",
        rePassword: ""

    }),
    methods: {
        change: async function() {

            let obj = {

                "code1": this.code1,
                "newPassword": this.newPassword,
                "rePassword": this.rePassword,

            };

            console.log(obj)
            let response = await this.$store.dispatch("changePass", obj);
    }
    }
}
</script>

Answer 1

We recommend that you use Vuex (State management) for easy transfer and management of data through pages

Documentation: https://vuex.vuejs.org/

Answer 2

If its only a variable with some value in it you can store it in localstorage i assume.

So in your function where you have the data you want to pass add:

localStorage.setItem('email', variable).

This works as a key value pair where email is the key and the variable is the data you want to access.

Then where you want to access the data you can use:

localStorage.getItem('email')

Answer 3

You probably don't want to do what you're trying to do, but would be better off with state management (vuex/pinia/genericVueStore), or, if you want to pass the data between components in the same app (same project), then the main method is $emits and $props. Check Vue documentation to see if that is what you want, which it probably is.

Nevertheless, within a Vue project, you can generally use Node/ES methods. So, the following would be fine, and would fit into the "composables" category if they weren't ".vue" files.

>> file1.vue
<script setup>
const oneData = "this_text"
export {oneData}

...

>> file2.vue
import {oneData} from "@/file1.vue"
console.log(oneData}

This would be an anti-pattern. Just follow the documentation for the standard things people try to accomplish.