Skip to content
Advertisement

Is it possible to use a variable across pages in VueJS (Quasar Framework)?

I am wondering if it’s possible to do something like this:

//File1.vue, <template> has a form on it
<script>

export default {
  data () {
    return {
      name: null,
      job: null
    }
  },
  methods: {
    onSubmit () {
      /// Store this.name and this.job in a variable
    },
    onReset () {
      this.name = null
      this.job = null
    }
  }
}
</script>

And access this variable on other .vue page, like this:

<script>
// access job and name here
export default {
}
</script>

Thanks for your time.

Advertisement

Answer

One option will be to use local storage:

onSubmit () {
  localStorage.setItem('storedName', this.name)
  localStorage.setItem('storedJob', this.job)
},

Then:

<script>
const storedName = localStorage.getItem('storedName')
const storedJob = localStorage.getItem('storedJob')
export default {

}
</script>
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement