Vuex 4 Course
$ vue create project-name
Push to Github
Migrate to Vue 3
$ vue add vue-next
Upgrade to latest npm packages
- Need version lense VS extension
- Go to package.json
- Upgrade all packages
$ rm -rf node_modules
Project setup
$ npm cache clean -f
$ npm install
Compiles and hot-reloads for development
$ npm run serve
Compiles and minifies for production
$ npm run build
What to build in order
- upgrade/migrate to Vue.js 3
- npm i bootstrap 5 alpha
- npm i bootstrap-icon
- Navbar
- Heroes (class card)
- npm i vue-router 4
- Router
- npm i vuex 4
- Setup Vuex 4 - hero module
- Get Request (v-for)
- Delete Request (class btn btn-danger)
- Post Request (Form)
- Put Request (editingTracker, v-if, v-else)
- npm i jsonwebtoken
- npm i -D @types/jsonwebtoken json-server-auth
- Setup Vuex 4 - auth module
- Register
- Login
- update auth service
- authGuard
- update router with meta requiresAuth and router BeforeEach
- ForgotPassword
- ContinueAs
- Done! Now do the Villain part with its own page and Vuex module.
Vuex Setup
- create store
- write a module
- write a state
- npm i axios
- write an api service
- write a type
- write an action
- write a mutation
- write a getter
- update components with mapGetters and mapActions
- npm i concurrently json-server
- copy-paste db.json