是否可以在 VueJS（类星体框架）中跨页面使用变量？

Question

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.

Answer 1

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>

Answer 2

This is what vuex and other state management libraries are designed for.
If you need your vaiables to be reactive, while not compilcate too much, you can use simpliest state management approach:

// src/stores/submitData.js
import Vue from 'vue';

export default Vue.observable({
    name: null,
    job: null,
});

<!-- inside vue component -->
<script>
import submitData from 'src/stores/submitData.js';

export default {
  data () {
    return {
      name: null,
      job: null
    }
  },
  methods: {
    onSubmit () {
      // Store this.name and this.job in a variable
      submitData.name = this.name;
      submitData.job = this.name;
    },
    onReset () {
      submitData.name = this.name = null;
      submitData.job = this.name = null;
    }
  },
  computed: {
    // currentJob will be updated whenever `submitData.job` changes
    currentJob() {
      return submitData.job;
    }
  }
}
</script>

// You can also use your store outside of vue component context (in normal js modules)
import submitData from 'src/stores/submitData.js';
// ...
const submittedJob = submitData.job;

Answer 3

Provide/inject seems like a suitable solution.

In your case it would look like this:

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

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

with this on other page:

<script>
import { inject } from 'vue'

const name = inject('name')
const job = inject('job')
export default {
}
</script>

or, to be consistent and use Options API:

<script>
export default {
    inject: ['name', 'job']
    created() {
        console.log(this.name) // injected value
    }
}
</script>

Answer 4

Consider using state management. In the past (Vue 2) it was vuex, now with Vue 3 it is Pinia that is most recommended (Pinia may be the next default state management system for future Vue).

Quasar works very well with Pinia (and vite). Just define that you will use them at the project creation (in the interactive questions): pinia, eslint, i18n, vite (in random order).

Please note that some plugins / tools work with Pinia OR Vuex, not both. Eg. Vue-auth