Description
In this course, we’ll be exploring the fundamentals of Vuex: Vue’s state management library. If you’ve been following along with our beginner path, this course will pick up where Real World Vue 3 left off. By the end of this course, you’ll have a solid understanding of when and why to use Vuex, and you’ll be empowered to implement it within your own Vue apps. Lesson by lesson, we’ll be adding Vuex to the example app that we created in the Real World Vue 3 course.
But before we get started writing any code, we need to understand the rationale behind Vuex, and look at an example use case that illustrates the different parts of Vuex and how it all works together.
The Case for State Management
Managing state in an application full of components can be difficult. Facebook discovered this the hard way and created the Flux pattern, which is what Vuex is based upon. Vuex is Vue’s own state management pattern and library. In this lesson, we’ll look at why an application might need Vuex, and how it can enhance your app.
When we talk about state, we mean the data that your components depend on and render. Things like blog posts, to-do items, and so on. Without Vuex, as your app grows, each Vue component might have its own version of state.
But if one component changes its state, and a distant relative is also using that same state, we need to communicate that change. There’s the default way of communicating events up and passing props down to share data, but that can become overly complicated.
Instead, we can consolidate all of our state into one place. One location that contains the current state of our entire application. One single source of truth.
A Single Source of Truth This is what Vuex provides, and every component has direct access to this global State.
Just like the Vue instance’s data, this State is reactive. When one component updates the State, other components that are using that data get notified, automatically receiving the new value.
But just consolidating data into a single source of truth doesn’t fully solve the problems of managing state. What happens when many components alter the State in different ways, from different locations?
We need some standardization. Otherwise, changes to our State could be unpredictable and untraceable.
Download Links
Direct Download
Vuex Fundamentals.zip (381 MB) | Mirror
