Vuex Workshop course materials
Materials for the State Management with Vuex Course
Author: Divya Tagtachian
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:
- 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!
Exercises:
State Management Basics (Codepen)
- 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
Vuex; the Good Parts (Codepen)
- 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
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 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]
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 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]
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 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]
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]
Vue CLI Resources
Vuex Resources
VS Code Extensions
https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack
License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License