vue.js - 无法将道具分配给数据

Question

这是一个简单的组件。我正在尝试分配props给文档data所说的。（来自vuex和数据库）initialData

<template>
    <section>
        {{ initialData }}
        {{ privateData }}
    </section>
</template>

<script>
export default {
    name: 'someName',
    props: [
        'initialData'
    ],
    data() {
        return {
            privateData: this.initialData
        };
    }
 };

但是，问题是initialData好的，但privateData只是一个空对象{}。

最奇怪的是，如果我再次保存我的文件，那么 webpack 热重新加载内容，privateData也会得到我需要的正确数据。

这是父母：

<template>
    <section v-if="initialData">
        <child :initial-data="initialData"></micro-movies>
    </section>
</template>

<script>
export default {
    name: 'parentName',
    data() {
        return {};
    },
    computed: {
        initialData() {
            return this.$store.state.initialData;
        }
    },
    components: {
        child
    }
};
</script>

我知道这是关于动态获取数据。因为如果我initialData手动将父级更改为某个对象，它可以正常工作。

Answer 1

数据函数只在组件创建时被调用一次。如果initialData在该时间点未填充，privateData则将始终为空。这就是为什么您可能想要使用计算属性或观察该属性的原因。