数据未填充到 Vue 应用程序中 [英] Data not populating in Vue app

问题描述

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

I'm trying to get some data from my vuex store into a component via computed. For some reason, it's not letting me access userInfo.uid in a couple of my components. It's saying that userInfo.uid is undefined even though VueTools is clearly showing that it has been successfully imported. Not sure why this is happening. For example here is a quiz component where I try to get the userInfo data from my vuex store so I can use it to access some data at a firebase reference.

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

Shouldn't I be able to access my vuex state using this.$store.state? It's throwing an error when I do that as well. Anyway, the following code gives me undefined 95% of the time. Except randomly it will give the userId then I reload the page and it's back to undefined. No idea what's going on. Thanks!

测验.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>

推荐答案

在 CreatedResources 中使用 computed 而不是 created，就像在父组件.由于我们必须使用 vuefire 的 $bindAsArray，这使得很难将 createdResources 声明为 computed，watchuserInfo 并将 created 里面的内容放在那里.

Use computed instead of created in CreatedResources, just like in the parent component. Since we have to use vuefire's $bindAsArray, which makes it hard to declare createdResources as computed, watch userInfo and put what's inside created there.

说明:

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

created is invoked only once in a component's lifetime, while computed re-evals every time its involved component properties change (and since vuex suggest use computed too, computed must also detects state changes). Also try putting the log in computed in the parent component, it should log the value when userInfo state changes.

正如 doc 所述，computed 监视属性的变化，这也可以用 watch 来实现，有一点优越:它缓存计算值直到依赖关系发生变化，而 watch evals每次询问计算值时.

As the doc explains, computed watches properties changes, which can also be achived with watch, with one thing superior: it caches the computed values until the dependencies change, while watch evals every time you ask for the computed value.

可选改进:

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

Putting db... in the parent and pass the server-side-fetched data to the child would be better since the child serves as a generic displayer and should receive ready-to-display-in-view data. (it has no idea what the data means, but only cares if the data matches its predefined structure)

这篇关于数据未填充到 Vue 应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！