使用 VueX 将数据获取到子组件时出现问题

Question

<template>
...
<note-info></note-info>
<note-list></note-list>
...
</template>

我用VueX，store.js

export default {
    state: {
        noteDataList: [],
    },
    mutations: {
        setNoteDataList: function (state, payload) {
            state.noteDataList = payload;
        },
    }
};

注释列表组件：

...
created() {
   const note_list = [{id: 1, name: "Monday"},{id: 2, name: "Tuesday"}]
   this.$store.commit("setNoteDataList", note_list);
}
...

注释信息组件：

...
computed: {
   ...mapState(['noteDataList'])
},
mounted() {
   console.log(this.$store.state.noteDataList[0]);
},
...

备注信息组件无法从备注列表中获取第一个对象

Answer 1

存在竞争条件，兄弟组件不能期望指定的执行顺序。它们可能会按照它们在模板中出现的顺序进行实例化，但这并不保证，也不应依赖于此。

负责显示子组件的逻辑（setNoteDataList等）可以移动到父组件，特别是如果它是同步的。

或者，访问< code>noteDataList的组件不应该期望它在实例化时准备好，而是需要通过计算的属性或观察器将它视为反应值。