在第一次访问之前，我无法在 v-tabs 中查看组件中的 Vuex 状态

Question

vuetify：^2.5.10 浏览器：^3.6.2 视图：^2.6.14

我有一个用 v-tabs 开发的应用程序。在第一个选项卡的子组件中，我有一个

<v-file-input
    v-model="file"
    outlined
    :rules="selector_rules"
    :clearable="false"
    :show-size="1000">
</v-file-input>
<v-btn color="primary" @click="commitData" class="mr-2">Commit</v-btn>

和

commitData() {
  this.$store.commit('setFile', this.file)
},

商店设置正确，因为在父组件

中计算了以下属性

computed: {
    ...mapGetters({
      file: 'getFile',
    }),
},

好像可行：我是这样看的：

file: {
  deep: true,
  immediate: true,
  handler() {
    console.log("Received file: " + this.file);
  }
},

至少对我来说，令人惊讶的是，在第二个选项卡的另一个组件中实现的完全相同的手表在我访问（即切换到）第二个面板之前不起作用。但是，计算出的属性在此组件中有效，因为在模板中我可以看到新的属性.

第一次访问选项卡后，手表继续正常工作。

是否有这样的原因以及避免访问它以使手表正常工作的方法？

Answer 1

v-tabs 仅在访问时加载内容。这意味着组件只有在激活时才会挂载。

您可以在 v-tab-item 组件上使用 eager 属性来确保它们始终被加载和安装。

API 文档参考：https://vuetifyjs.com/en/api/v-tab-item/#props-eager

在第一次访问之前，我无法在 v-tabs 中查看组件中的 Vuex 状态

I cannot watch Vuex state in components within v-tabs until first visit

vue.js

vuex

vuetify.js

vuetify-tabs