State Management with Vuex Chapter 21Let's define these terms in a little more depth.
State Management Pattern (SMP)
We can define a state as the current value(s) of a variable/object within our component or
application. If we think about our functions as simple INPUT -> OUTPUT machines, the
values stored outside of these functions make up the current condition (state) of our
application.
Note how I've made a distinction between component level and application level state.
The component level state can be defined as state confined to one component (that is, the
data function within our component). Application level state is similar but is often used
across multiple components or services.
As our application continues to grow, passing state across multiple components gets more
difficult. We saw earlier in the book that we can use an Event bus (that is, a global Vue
instance) to pass data around, and while this works, it's much better to define our state as
part of a singular centralized store. This allows us to reason about the data in our
application much easier, as we can start defining actions and mutations that always
generate a new version of state, and managing state becomes much more systemized.
Event bus is a simple approach to state management relying on a singular view instance
and may be beneficial in small Vuex projects, but in the majority of cases, Vuex should be
used. As our application becomes larger, clearly defining our actions and intended side
effects with Vuex allows us to better manage and scale the project.
A great example of how all this fits together can be seen in the following screenshot
(https://vuex.vuejs.org/en/intro.html):