Materials for the State Management with Vuex Course

Author: Divya S

Here are the Vue chrome devtools

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

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

git submodule update --init --recursive

• Vuex 1: Introduction to State Management
• Vuex 2: Vuex; The Good Parts—State, Getters, Actions, Mutations
• Vuex 3: Getting Vuex State into SFCs
• Vuex 4: Composing Vuex Actions
• Vuex 5: Vuex Modules
• Vuex 6: Vuex Plugins
• Vuex 7: Vuex + Vue Router

Bonus Content!

• Vue 3

• Exercise 1: Convert the dispense method to using state and actions in a vuex store https://codepen.io/shortdiv/pen/zYGoVwe
• Exercise 2: Convert the restock method to using state and actions in a vuex store https://codepen.io/shortdiv/pen/rNVjzoe

• Exercise 1: Let's create isRestocking state in Vuex that gets toggled on fetchInventory https://codepen.io/shortdiv/pen/xxGrMLV
• Exercise 2: Switch out the language so it's handled in Vuex https://codepen.io/shortdiv/pen/MWwJXEJ

• 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]

• 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]

• 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]

• 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]

• 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]

• 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]

• 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

• Vuex docs
• Understanding Vue 3 Closures

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

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