Why does my computed property's state show as blank in mounted hook, but fine everywhere else?

1
votes

As the topic suggests, I have a particular item in my vuex store which I am bringing into my component in the computed properties section using mapState. This is the code for it:

computed: mapState({
  orderTitle: state => state.order.bookTitle,
}),

When I inspect this in the Vuex section of Vue Dev Tools, I can see that it is accurately getting the data from the store.

Now the problem.

I have an input text field which I have put a v-model on, and associated it with a data property. What I want to do is pre-populate that text field with the text found in orderTitle which I am getting from my store.

I tried doing this by simply assigning the value in the computed property to the data property in the mounted hook. However, this didn't work.

When I tried to troubleshoot it by doing console.log(this.orderTitle) to see the value of the computed property in the mounted hook, it showed up as blank.

How come the value is properly appearing in the Vue Dev Tools (and even in the console when I do $vm0.orderTitle) but not in the mounted hook?

Any thoughts?

Thanks!

2
vue.jsvuex
If the data is populated asynchronously, it's going to show in the dev tools because by the time you look at it the value is there. It won't show in the mounted event, because at that point in time it is not yet available. – Bert
@Bert exactly. So is there a way to make the data assignment at a point in time when the data is available? i.e. how do I know when that happens in the lifecycle and call it at that time? – Kopty
Typically use a computed value which updates automatically so that you don't need to set anything. In Vuex they're called getters and you can map a getter to your component. – Bert

2 Answers

1
votes

I figured it out. Instead of performing the actions in the mounted hook, I did it in the updated hook, which fires much later in the Vue instance lifecycle (after the Virtual DOM is re-rendered & patched).

0
votes

Sounds like a "this scope" problem.

Try with

computed: mapState({ orderTitle (state) { return state.order.bookTitle } }),