Problem get data to child component using VueX

Question

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

I using VueX, store.js

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

Note List Component:

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

Note Info Component:

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

Note info component can't get first object from note list

Estus Flask · Accepted Answer · 2022-08-08 11:51:31Z

1

There's race condition, the specified order of execution cannot be expected from sibling components. They are potentially instantiated in the order they appear in a template, but this isn't guaranteed and shouldn't be relied on.

The logic that is responsible for displaying child components (setNoteDataList, etc) can be moved to parent component, especially if it's synchronous.

Alternatively, the component that accesses noteDataList shouldn't expect it to be ready on instantiation and needs to treat is as reactive value via computed properties or watchers.

answered Aug 8, 2022 at 11:51

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem get data to child component using VueX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related