In this lesson, Hassan teaches about state management and Vuex. He addresses questions such as:
- How do we manage state in our application as the application grows?
- How can we communicate from children to parent components?
Students will specifically learn about:
- Props: can be used to pass data from parent components to down to child components.
- Custom Events: allow child components to communicate with parent components.
- An Event Bus: can enable isolated components to subscribe and publish custom events between one another.
- Simple State Management: can be performed by creating a "store pattern" that involves sharing a data store between components.
- Vuex: the flux-like, state management library built solely for use with Vue Getters, Mutations, and Actions.
Excercise
It's time to practice! In this exercise you will make a new app that uses Vuex to handle state.
Goals
- Use Custom Events to have the
InputComponentmanipulate the data value in the rootAppcomponent. Use props to pass data fromAppto theNoteCountComponent. - Create a simple store pattern that has
InputComponentandNoteCountComponentinteract through a single store instance. - Create a Vuex store pattern to have
InputComponentinput information andNoteCountto determine the number of notes entered.
Starter code: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/04-state-management-and-vuex/exercise/starting-point