Vuex: Intro Tutorial

managing state in an application full of components can be difficult Facebook discovered this the hard way which is why they created the flux pattern which UX is designed after UX is views own state management pattern and library and in this video I'll be showing you why you might need UX and how it can enhance your application 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 the UX as your app grows each view component might have its own version of state but if one component changes its state and the 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 this is what view X provides and every component has direct access to this global state and just like the view instances data this global State is reactive so 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 one single source of truth doesn't fully solve the problems of state management what happens when many different components alter the state in different ways from different locations we need some standardization otherwise changes to state can be unpredictable and untraceable this is why view X provides a full state management pattern for a simple and standardized way to make state changes and if you're familiar with you you actually look pretty similar just like we create a new view instance we can create a new view X store with new QX dot store while the instance has data the view X store has State both of which are reactive the view instance has methods which among other things can update our data while the view X store has actions which can update the view X State and while the instance has computer properties which can access our data the view F store has getters which can access our state difference here is the store also has mutations mutations are used to commit and track state changes it's a best practice to have our actions call mutations which update our state directly and by using the view dev tools we can do time-travel debugging and we can roll back a mutation which reverts the state to its previous value so let's look at an example of UX store in our state we have a loading status as well as a to do's array in our mutations we have set loading status which takes the state of our loading status and updates it and we have set to duce which takes the state of our - duze and sets it accordingly then in our actions we have fetch - duze let's walk through this code we're taking in the context object which contains all the properties of our view X store which allows us to commit mutations the first mutation we're committing is set loading status which will set the loading status to loading then we're making an API call and when that response returns we'll commit the set loading status mutation again setting it to not loading finally we'll commit set to dues setting the to do state with the response we got from our API call if we need the ability to only retrieve the two dues that are labeled done we can use a getter for that which will retrieve only the specific state that we want now let's look at the UX in motion from our component we could dispatch the fetch to dues action and that will run all the code we just looked at first it'll commit the set loading status mutation which updates our loading status state - loading then we'll fetch our data and when that data is retrieved we'll commit our set loading status again updating our loading status to not loading and finally we'll commit the set to dues mutation which sets the to do state with the api's response and if you only wanted to get the done to dues we can use the Kidder to achieve that then if we look at the view dev tools we could see a timestamp record of each mutation that was committed hopefully you now understand how view X can enhance your application by providing a single source of truth for your state and a useful library of actions mutations and getters to continue learning about UX you can check out the official view X documentation or to continue learning with me you can head over to view mastery calm and watch our entire mastering view X course we have over an hour's worth of UX content hope to see you there

Channel: Vue Mastery

Views: 76,577

Keywords: vuex, vue.js, vue, state management, intro to vuex, vuex tutorial, learn vuex, how to vuex

Id: _2_C9j-8CtM

Length: 5min 23sec (323 seconds)

Published: Sat Nov 17 2018