Vue.js Object in array undefined in data from store - arrays

Question

Sorry if this is really obvious but I’m new to Vue and could use some help.
I’m grabbing an array of data (posts) from my store and trying to console log just one of the objects in the array, but it’s showing undefined every time. If I console log the whole array it returns fine.
I’m guessing this is something to do with the data not loading before the console.log in the created hook? I’ve tried everything I can and it’s driving me nuts. Any help appreciated (simplified code below).
<script>
export default {
components: {},
computed: {
posts() {
return this.$store.state.posts;
}
},
created() {
this.$store.dispatch("getPosts");
console.log(this.posts[0])
},
};
</script>
//Store code Below
export const state = () => ({
posts: [],
})
export const mutations = {
updatePosts: (state, posts) => {
state.posts = posts
}
}
export const actions = {
async getPosts({
state,
commit,
dispatch
}) {
if (state.posts.length) return
try {
let posts = await fetch(
`${siteURL}/wp-json/wp/v2/video`
).then(res => res.json())
posts = posts
.filter(el => el.status === "publish")
.map(({
acf,
id,
slug,
video_embed,
title,
date,
content
}) => ({
acf,
id,
slug,
video_embed,
title,
date,
content
}))
commit("updatePosts", posts)
} catch (err) {
console.log(err)
}
}
}

Answer 1

Console behavior explained
When you log an object or array to the console, then click to expand/view the properties, the console shows you the properties as they are now, at the time of the click, not the time of the log. So if they've changed after logging, you'll see the new values.
How? Since objects and arrays are reference variables, the console stores the reference, and then updates itself when you click. This is only true of objects and arrays.
Conversely, When you log a primitive to the console, you see it only as it was at the time of the log.
In Chrome, you will also see a little blue square next to the object in the console. When you mouse over, it tells you, "Value below was evaluated just now."
This is why you never saw the value when logging one item, because it was an item that didn't exist yet. But posts always has a reference, since it's initialized to an empty array. So when logging the posts reference, by the time you click, the data has arrived.
Here is a demo that tries to make that very clear.

Answer 2

you get an undefined because the asynchronous functions have not yet filled the state.
With asynchronous data you should always use getters.
getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.
Vuex Getters
// Store
export const getters = {
get_posts(state) {
return state.posts;
}
}
-
// component
computed: {
posts() {
return this.$store.getters['get_posts'];
}
};

Answer 3

You need to use promises as per the docs https://vuex.vuejs.org/guide/actions.html#composing-actions. Your action was not returning its promise to get data, nor were you waiting for the promise to resolve before you console.logged the result. Promises are a very important concept to master. Here's an example that basically matches your code, though I used setTimeout instead of a real fetch call.
const store = new Vuex.Store({
state: {
posts: []
},
getters: {
itemList: (state) => {
return state.items;
}
},
mutations: {
updatePosts: (state, posts) => {
state.posts = posts
}
},
actions: (actions = {
async getPosts({ state, commit, dispatch }) {
if (state.posts.length) {
return Promise.resolve();
}
try {
return new Promise(resolve => setTimeout(() => {
const posts = [{ id: 42 }];
commit("updatePosts", posts);
resolve();
}, 1000));
} catch (err) {
console.log(err);
}
}
})
});
const app = new Vue({
el: "#app",
computed: {
posts() {
return this.$store.state.posts;
}
},
created() {
this.$store.dispatch("getPosts").then(() => console.log(this.posts[0]));
},
store
});
<script src="https://unpkg.com/vue#2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuex#2.5.0/dist/vuex.js"></script>
<div id="app">
</div>

Answer 4

If you want to get the correct data on created() hook, the action should be executed before displaying the data.
In created() hook, you can dispatch the action asynchronously.
async created() {
await this.$store.dispatch("getPosts");
console.log(this.posts[0])
},
You can use JavaScript Promises.
async created() {
this.$store.dispatch("getPosts").then(()=> {
console.log(this.posts[0]);
});
},