With vuex is there a reason why it's better to access state directly than via a getter if the getter is just returning the state?
Let us first take care to illustrate this issue:
the store
two very different components
In both components, messages are the responsibility of a Vuex store.
RedPill: direct access to the state
In the component <RedPill />, we access the state directly via the store object which is injected to all root child components.
The component retrieves the list of messages and can display their content:
BluePill: using a getter
In the other component <BluePill />, we access the state via a getter which is not complex since it returns directly the object: const messages = state => state.messages.
From a component and the application point of view, there is no difference.
how deep does the rabbit hole go?
The RedPill is dependant of the internal state organization. Every time the state is reorganized, the RedPill should be updated. The RedPill has a big responsibility: to know where it can find the list of messages.
On the other hand, the BluePill is independent of the internal organization of the state because it asks the store, whenever it needs it, to return the list of messages. The BluePill does not have the responsibility to know where it can find the list of messages.
Let's say that the Vuex store is redesigned to allow organization in modules.
Top comments (1)
I have evolved my thinking on the subject, which I have expressed in a new article: dev.to/enguerran/vuex-state-and-ge...