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

Question

我想知道是否可以这样做：

//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>

然后在其他 .vue 页面上访问这个变量，像这样：

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

感谢您的宝贵时间。

Answer 1

一个选项是使用本地存储：

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

然后：

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

}
</script>

Answer 2

这就是 vuex 和其他状态管理库的设计目的。
如果你需要你的 vaiables 是反应性的，而不是编译太多，你可以使用最简单的状态管理方法：

// 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 似乎是一个合适的解决方案。

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

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

javascript

vue.js

quasar-framework