页面重新加载导致 Vuex getter 返回 undefined答案

【问题标题】：Page reload causes Vuex getter to return undefined页面重新加载导致 Vuex getter 返回 undefined
【发布时间】：2019-06-29 14:55:57
【问题描述】：

使用 Vue.js (Vuetify for FE)。

页面重新加载会导致 Vuex 中的 getter 无法从存储中提取所需数据。 getter 返回未定义。代码可以在 GitHub 上找到：https://github.com/tineich/timmyskittys/tree/master/src

请在 timmyskittys.netlify.com/stage1 上查看有关此问题的完整详细信息。此页面包含有关问题的完整信息以及有关如何查看问题的说明。

注意，问题描述中提到了 www.timmyskittys.com。这是主要站点。 timmyskittys.netlify.com 是我的测试站点。因此，它们在所有意图和目的上都是相同的。但是，我在 Netlify 站点上对此问题的演示。

【问题讨论】：

重新加载页面时，您正在丢失存储状态。可能的解决方案：尝试让其中一个 vuex 持久性模块再次工作，修改您的商店 getter 和突变以保存/从本地存储中提取，在您的 getter 中添加一个空检查以重新获取数据，或者尝试使用导航保护 @987654322 @ 进行空检查，如果为空则重新获取数据。

标签： vue.js vuex vuetify.js

【解决方案1】：

我在您提到的网站上阅读了完整的问题。这是一般情况。

比如说，对于猫的详细信息页面 url：www.timmyskittys.com/stage2/:id。

现在在 Per-Route Guard beforeEnter() 中，您可以在 store 中设置 cat-id。然后从您的组件中使用 cat-id 调用 api（从 getters 读取）

【讨论】：

感谢您的回复，并花时间查看我的问题。由于这个问题，我几个月来一直在打我的头。我确实尝试了 beforeEnter()，但产生了同样的问题。我一定会再试一次。你介意提供更多关于你的建议的细节吗？ store和组件代码可以在github上找到：github.com/tineich/timmyskittys/tree/master/src
嗨，萨吉布。是的，我终于能够解决。问题是我正在获取我的数据并将其拉入 Vuex 中，该组件是的一部分。我不得不将调用突变的动作的调用移到 App.vue 中（将其置于之外）。感谢您抽出宝贵时间提供帮助。

【解决方案2】：

我找到了解决问题的方法：

我不得不将调用加载 .json 文件 (dbdata.json) 的突变的动作的调用移动到 App.vue 中的 computed() 中。这最初是在 Stage1.vue 中完成的。

感谢大家的回复。

【讨论】：

【解决方案3】：

我有同样的问题，如果可以调用我的“修复”，那就是制作一个计时器，以便让商店有时间把事情做好，就像这样：

<v-treeview
    :items="items"
    :load-children="setChildren"
  />
</template>

<script>
import { mapGetters } from 'vuex'

const pause = ms => new Promise(resolve => setTimeout(resolve, ms))

export default {
  data () {
    return {
      children: []
    }
  },
  computed: {
    ...mapGetters('app', ['services']),
    items () {
      return [{
        id: 0,
        name: 'Services',
        children: this.children
      }]
    }
  },
  methods: {
    async setChildren () {
      await pause(1000)

      this.children.push(...this.services)
    }
  }
}
</script>

尽管这远非理想，但它确实有效。

【讨论】：