[Vuejs]-"Sending" data from vuex store to component

0👍

The root of the problem is that you are using actions to directly modify the state. If you don’t want to lose reactivity, then commit to mutations instead.

https://vuex.vuejs.org/guide/mutations.html
https://vuex.vuejs.org/guide/actions.html

This means that you don’t use state in an action, only get the data (asynchronously) with an action and then set the state (synchronously) with a mutation that gets the data from the action as payload.

If you follow the pattern shown in the links above, the received data should show up in your component.

There’s an excellent todo app that you can examine – I think it’s written so that one can understand a lot about VueJS (and Vuex, Vuetify, etc) just by trying to recreate what’s there: https://github.com/davidgaroro/vuetify-todo-pwa

The data is passed through the computed property (usually), where you return the results of the Vuex action. (https://v2.vuejs.org/v2/guide/computed.html)

Leave a comment