Question

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

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

Quiz.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

在AJAX中使用computed代替created，就像在父组件中一样。编辑：因为我们必须使用vuefire＆＃39; CreatedResources，这使得很难将$bindAsArray声明为createdResources，computed watch并放置＆＃ 39;在userInfo里面。

解释：

created仅在组件的生命周期中调用一次，而created每次涉及的组件属性发生变化时都会重新进行（并且由于vuex建议也使用计算，因此计算必须还会检测到国家变化）。另外，尝试将computed放在父组件的log中，它应该在computed状态更改时记录该值。

正如doc所解释的那样，userInfo监视属性更改，这些更改也可以通过computed获得，但有一件事更优越：它会缓存计算值，直到依赖关系发生变化，而{ {1}}每当你要求计算值时就会进行审计。

可选改进：

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

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

2 个答案: