Vue.js 2 Design Patterns and Best Practices

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 ...