数据未填充到 Vue 应用程序中

Question

我正在尝试通过computed 从我的 vuex 存储中获取一些数据到组件中。出于某种原因，它不允许我在我的几个组件中访问userInfo.uid。就是说 userInfo.uid 是 undefined 即使 VueTools 清楚地显示它已成功导入。不知道为什么会这样。例如，这是一个测验组件，我尝试从我的 vuex 存储中获取 userInfo 数据，以便我可以使用它来访问 firebase 引用中的一些数据。

难道我不能使用this.$store.state 访问我的 vuex 状态吗？当我这样做时，它也会引发错误。无论如何，下面的代码给了我 95% 的不确定性。除了随机它会给出userId 然后我重新加载页面并返回到undefined。不知道发生了什么。谢谢！

测验.vue

<template>

</template>

<script>

// TODO: WHY IS userInfo.uid UNDEFINED!!!!?????

var db = firebase.database();
import store from '../store'
import { mapState } from 'vuex'
import VueFire from 'vuefire'
import Vue from 'vue'

Vue.use(VueFire)

export default {
    name: 'quiz',
    computed: mapState({
        userInfo: state => state.userInfo
    }),
    created () {
        console.log(store.state.userInfo.uid)
    },
    components: {},
    firebase: {
        quiz: db.ref('/users/' + store.state.userInfo.uid + '/createdResources/' + store.state.postKey + '/quiz/')
    }
}
</script>

<style>
    .quiz {
        margin-top: 60px;
        padding: 40px;
        width: 800px;
        background-color: white
    }
<style>

Answer 1

您可以使用生命周期挂钩：updated

在数据更改导致虚拟 DOM 重新渲染和修补后调用。

调用该钩子时，组件的 DOM 将处于更新状态，因此您可以在该钩子中执行依赖于 DOM 的操作。但是，在大多数情况下，您应该避免在此挂钩中更改状态，因为它可能会导致无限更新循环。

在服务器端渲染期间不会调用此钩子。

什么时候调用什么事件可以参考下面的生命周期图。

Answer 2

在CreatedResources 中使用computed 而不是created，就像在父组件中一样。编辑：由于我们必须使用 vuefire 的 $bindAsArray，这使得很难将 createdResources 声明为 computed、watch userInfo 并将里面的内容放在 created 那里。

解释：

created 在组件的生命周期中只被调用一次，而computed 每次涉及的组件属性发生变化时都会重新评估（并且由于 vuex 也建议使用计算，计算也必须检测状态变化）。还可以尝试将log 放入父组件中的computed，它应该在userInfo 状态更改时记录该值。

正如doc 解释的那样，computed 监视属性发生变化，这也可以通过 watch 实现，但有一个优势：它会缓存计算值直到依赖关系发生变化，而 watch 每次你求计算值。

可选改进：

将db... 放在父级中并将服务器端获取的数据传递给子级会更好，因为子级用作通用显示器并且应该接收准备好在视图中显示的数据。 （它不知道数据的含义，只关心数据是否与其预定义的结构匹配）