You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
9.7 KiB
Markdown
161 lines
9.7 KiB
Markdown
# real-world-vue
|
|
|
|
## Course Take aways:
|
|
|
|
- You missed it in the vuex course but they started using `import Datepicker from 'vuejs-datepicker'` in the EventCreate component.
|
|
|
|
- Installation of [NProgress](https://github.com/rstacruz/nprogress) to create a better experience for a user when they are interacting with our application.
|
|
- Axios Interceptors
|
|
- Not optimal for multiple API calls
|
|
- We do not want to show the user the template before the data is available.
|
|
- We would probably want to use a little indirection using Vuex to track how many APIs are waiting responses before calling done. This would mean having some global state that is tracking this count, starting and stopping the progress as needed.
|
|
- In-component Route Gaurds
|
|
- Global and Per-Route Gaurds (Unltimately will use this.)
|
|
- Use the `npx json-server -d 1500 --watch ./db.json` command to simulate a slow network response.
|
|
- Good reasons to use interceptors:
|
|
- On request to set authorization tokens
|
|
- On respinse to format or filter data before it reaches into your app
|
|
- On response to catch 401 not authorized responses. You might want to trigger and action to renew your token, or redirect to login.
|
|
- Vue Router provides our solution with 3 addtional hooks called route navigation gaurds. All must call the `next` function.
|
|
1. `beforeRouteEnter(routeTo, routeFrom, next)` Which is called before the component is created. You will not have access to `this` in the targeted component.
|
|
2. `beforeRouteUpdate(routeTo, routeFrom, next)` Called when the route changes, but still using the same component. Has access to `this`.
|
|
3. `beforeRouteLeave(routeTo, routeFrom, next)` Called when the this component is navigated away from. Has access to `this`.
|
|
- `routeTo` is the Route being navigated to
|
|
- `routeFrom` is the current Route
|
|
- `next` is a function that MUST be called to resolve the hook.
|
|
- `next()` with no params will confirm the navigation
|
|
- `next(false)` will cancel the navigation.
|
|
- `next('/')` with a path will redirect to the provided path. We can also specify a named path `next({ name: 'event-list' })` if we wanted. You can put any options that you could put in your router link also with this method.
|
|
- An example of using `beforeRouteLeave(routeTo, routeFrom, next)` might be to prompt a user to save thier work before navigating away from the page.
|
|
|
|
```
|
|
beforeRouteLeave(routeTo, routeFrom, next) {
|
|
const answer = window.confirm('Do you really want to leave? You have unsaved changes`)
|
|
if (answer){
|
|
next()
|
|
} else {
|
|
next(false)
|
|
}
|
|
}
|
|
```
|
|
|
|
### Global Route Gaurds & Per Route Gaurds
|
|
|
|
Global Route Gaurds allow us to add hooks that run whenever nagigation is triggered. These gaurds are called on the `router` object. We need to set the `router` object to a contant.
|
|
|
|
- `beforeEach` runs before _navigating_ to any component and must call `next()`
|
|
|
|
```
|
|
router.beforeEach((routeTo, routeFrom, next) => {
|
|
next()
|
|
})
|
|
```
|
|
|
|
- `afterEach` runs before the target route component is _created_ and doesn't have a `next` method to call.
|
|
|
|
```
|
|
router.afterEach((routeTo, routeFrom) => {
|
|
...
|
|
})
|
|
```
|
|
|
|
- The ordering of hooks are as follows:
|
|
1. `router.beforeEach()` Global gaurd
|
|
2. `beforeEnter()` Per route gaurd
|
|
3. `beforeRouteEnter()` Router guard in component
|
|
4. `router.afterEach()` Global gaurd
|
|
5. `beforeCreate()` Component hook
|
|
6. `created()` Component hook
|
|
7. ...
|
|
|
|
### Per Route Gaurds
|
|
|
|
Per Route gaurds let us tap into for example the `beforeEnter` hook within our `/src/router.js` which will run before routing to the component.
|
|
|
|
```
|
|
const router = new Router({
|
|
mode: 'history',
|
|
routes: [
|
|
{
|
|
path: '/',
|
|
name: 'event-list',
|
|
component: EventList
|
|
beforeEnter((routeTo, routeFrom, next) => {
|
|
fetchEvent()
|
|
next()
|
|
}
|
|
},
|
|
```
|
|
|
|
Since all the API action calls are occuring in the router lifecycle hooks at this time. You can actually remove all vuex code from the component. This could make your code simpler and easier to maintain. You will need to ensure that the actions in your vuex store are returning the objects you are working with however to ensure this works.
|
|
|
|
_NOTE:_ Since `beforeEnter` is only called when the component is created it's use with a component that does paginatation will not work. The `fetchEvent` wouldn't be called.
|
|
|
|
_NOTE2:_ Vue Router may get another per-route guard called beforeResolve which called on Create and Update. If it is available it would be a more elegant solution to our pagination problem.
|
|
|
|
### Base Form elements
|
|
|
|
- Look up `vue-multiselect` for when you want to use a select field and the options have objects in them.
|
|
- `v-on="$listeners"` means that this element inherits the listners of the parent component
|
|
- `v-bind="$attrs"` won't work for inheriting class and style attributes. Vue will have $class and $style I believe
|
|
|
|
### Form Validation
|
|
|
|
`npm install vuelidate --save`
|
|
|
|
Adding `validations` to our component adds a computed property `$v` to our component. This object will have boolean values for the associated validators. When all validators pass `$v.$invalid: false`.
|
|
|
|
### Advanced folder structure
|
|
|
|
📂 A pages directory for your Application views and routes.
|
|
|
|
📂 A layouts directory for your layout templates.
|
|
|
|
📂 A store directory for your Vuex store files.
|
|
|
|
## Following along?
|
|
|
|
We encourage you to follow the course on Vue Mastery, and code along with us. This course has tags representing the start and finish of each level, just in case you get stuck. Here's the start and ending code of each lesson, if you'd like to download them.
|
|
|
|
To achieve this you would need to have the state returned from the api call and pass that into the target component as a prop.
|
|
|
|
| Lesson | | |
|
|
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
|
| 2 - Vue CLI | n/a | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson2-cli-finish) |
|
|
| 3 - Optimizing your IDE | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson3-editor-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson3-editor-finish) |
|
|
| 4 - Vue Router Basics | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson4-routing-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson4-routing-finish) |
|
|
| 5 - Dynamic Routes & History Mode | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson5-dynamic-routing-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson5-dynamic-routing-finish) |
|
|
| 6 - Single File Components | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson6-sfc-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson6-sfc-finish) |
|
|
| 7 - Global Components | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson7-global-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson7-global-finish) |
|
|
| 8 - Slots | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson8-slots-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson8-slots-finish) |
|
|
| 9 - API Calls with Axios | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson9-axios-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson9-axios-finish) |
|
|
| 11 - Vuex State & Getters | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson11-vuex-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson11-vuex-finish) |
|
|
| 12 - Vuex Mutations & Actions Part 1 | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson12-mutations%26actions1-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson12-mutations%26actions1-finish) |
|
|
| 13 - Vuex Mutations & Actions Part 2 | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson13-mutations%26actions2-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson13-mutations%26actions2-finish) |
|
|
| 14 - Vuex Modules | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson14-modules-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson14-modules-finish) |
|
|
| 15 - Success & Error Notifications | [Starting Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson15-notifications-start) | [Finished Code](https://github.com/Code-Pop/real-world-vue/releases/tag/lesson15-notifications-finish) |
|
|
|
|
## Project setup
|
|
|
|
```
|
|
npm install
|
|
```
|
|
|
|
### Compiles and hot-reloads for development
|
|
|
|
```
|
|
npm run serve
|
|
```
|
|
|
|
### Compiles and minifies for production
|
|
|
|
```
|
|
npm run build
|
|
```
|
|
|
|
### Lints and fixes files
|
|
|
|
```
|
|
npm run lint
|
|
```
|