One Day Introduction to Vue.js with Hassan Djirdeh [Workshop]

State Management & Vuex


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.

It's time to practice! In this exercise you will make a new app that uses Vuex to handle state.

  • Use Custom Events to have the InputComponent manipulate the data value in the root App component. Use props to pass data from App to the NoteCountComponent.
  • Create a simple store pattern that has InputComponent and NoteCountComponent interact through a single store instance.
  • Create a Vuex store pattern to have InputComponent input information and NoteCount to determine the number of notes entered.

Starter code:


I finished! On to the next chapter