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!
- 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 actionvuex-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 machinesvuex-static-vs-dynamic-modules[step-0]
- Exercise 4: Similarly, in the
vendingMachineItem
component, extrapolate the store and dynamically load itvuex-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 sharedvuex-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 guardvuex-and-router[step-0]
- Exercise 2: In the routes file, add metadata to
admin
andinventory
and create a global navigation guard that checks whether a user is logged invuex-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]
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