Skip to content

shortdiv/frontend-masters-vuex

Repository files navigation

Vuex Workshop course materials

Materials for the State Management with Vuex Course

Author: Divya S

Here are the Vue chrome devtools

Code

All code is available on this repo, exercises are saved in submodules so be sure to run the following commands to pick those up:

git clone --recurse-submodules https://github.com/shortdiv/frontend-masters-vuex.git

Troubleshooting

If things seem outdated, try updating submodules with this command:

git submodule update --init --recursive

Slides:

Bonus Content!

Exercises:

State Management Basics (Codepen)

Vuex; the Good Parts (Codepen)

Vuex in SFCs (Local Editor)

  • Exercise 1: Let's move our vuex store into a separate file vuex-sfc[step-0]
  • Exercise 2: Destructure context so it uses the methods commit and dispatch vuex-sfc[step-1]
  • Exercise 3: Update so that the remaining action and getters are using helpers vuex-sfc [step-2]

Composing Actions (Local Editor)

  • Exercise 1: In the fetchFromInventory action, dispatch a call to check the machine state action vuex-compose-actions[step-0]
  • Exercise 2: Create a fail condition, where the machine shows a message when dispensing while stock is < 0 vuex-compose-actions[step-1]

Vuex Modules (Local Editor)

  • Exercise 1: Let's move our store, getters, actions and mutations into separate vuex modules vuex-modules[step-0]
  • Exercise 2: Let's namespace our vuex module and update the actions, and getters in the component appropriately vuex-modules[step-1]

Vuex Modules Cont'd - Static vs Dynamic (Local Editor)

  • Exercise 3: In the operatorView component, extrapolate the store and dynamically load it so that servicing the primary machine doesn't update the other machines vuex-static-vs-dynamic-modules[step-0]
  • Exercise 4: Similarly, in the vendingMachineItem component, extrapolate the store and dynamically load it vuex-static-vs-dynamic-modules[step-1]
  • Exercise 5: In the vendingMachineItem component, create a unique id for every module, this way, the module for every item isn't shared vuex-static-vs-dynamic-modules[step-2]

Vuex Plugins

  • Exercise 1: Let's create our first Vuex Plugin persistState vuex-plugin[master]
  • Exercise 2: Let's modify to use subscribeAction in our Vuex Plugin persistState vuex-plugin[middle-state]
  • Exercise 3: Modify to use subscribeAction (before/after) that listen for action change and register the frequency change vuex-plugin[end-state]

Vuex + Vue Router

  • Exercise 1: In the admin route, create a per-route navigation guard vuex-and-router[step-0]
  • Exercise 2: In the routes file, add metadata to admin and inventory and create a global navigation guard that checks whether a user is logged in vuex-and-router[step-1]

Normalize Vuex State (Local Editor)

  • Exercise 1: Let's create a model of Machine in Vuex ORM vuex-normalize-state[step-0]

  • Exercise 2: Let's create a location model in Vuex ORM vuex-normalize-state[step-1]

  • Exercise 3: Let's create some helper queries in Vuex ORM vuex-normalize-state[step-2]

  • Vuex Workshop Codepen Collection

Vue CLI Resources

Vuex Resources

VS Code Extensions

https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack

License

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published