Welcome to VueJS workshop

Excercises

• Add vue-router to our previous exercise project
• Switch Navigator component we've created to be a Vue Router
• Add Navigation bar with Nav links using named routes
• Add custom active class to Nav link
• Create store/store.js file that will have a post dictionary, getter, and setter. (post should also contain userId and isPublic flag)
• On the Blog page, display a list of blog posts titles fetched from dummy API and stored in store.js post dictionary.
• When clicking on a blog post navigate to Post page with the full post text.
• Add the next and previous button in every post to navigate to the next or previous post. When reaching the end of posts, get back to blog page (tip: use beforeRouteUpdate)
• Create 404 route and catch all unmatched routes there
• Create UserProfile protected page and redirect to Login page when trying to access

Exercises

VueX

VueX is based on Facebook Flux architectural patterns

So what is Flux?

illustrations by https://code-cartoons.com/

illustrations by https://code-cartoons.com/

VueX

Getting started

vue add vuex

Getting started

vue add vuex

State

Store state should be accessed in a component computed property since store state is reactive

store is automatically injected by Vue when using Vue.use(VueX)

Even though you have access to state - never change it from the component

Getters

Similar to computed of the component, if we need to derrive state based on store dependencies, we use getters in the store and access them as this.$store.getters in the component

Mutations

State should be changed ONLY by committing mutations

Mutations gotchas

Mutation are synchronous, so no async logic in your mutations

Mutations can be commited in components but it's advised not to

use constants for mutation types

Actions

Actions don't mutate the state but rather commit mutations

actions can include asynchronous code

Actions

actions are dispatched using $store.dispatch('actionName', payload) or similar to mutations having object syntax

Excercise

Convert ToDo app to use VueX

Async flows

For managing async flows when one action needs to fire after other, we can return a Promise from an action 

Async flows

For managing async flows when one action needs to fire after other, we can return a Promise from an action 

Mapping utils

import { mapState } from 'vuex'

State

Mapping utils

import { mapGetters, mapMutations } from 'vuex'

getters, mutations

Actions

import { mapGetters, mapMutations } from 'vuex'

VueX

we can separate VueX state by using modules. 

module has encapsulated state, but will have access to rootState through context

module has encapsulated state, but will have access to rootState through context

actions, mutations and getters inside modules are still registered under the global namespace unless provided namespace: true option

Modules

Strict mode

In strict mode any mutations outside of handlers will trigger a warning

Excercise 7

Create VueX store with user and module and posts module

Load posts into a store on initial app load

Change posts access to be getters from the store

Integrate login flow with VueX user module

Add login button to redirect to the Login page or present user name when the user is logged in

create add comments functionality to an app (if not logged in, it should be a guest, if logged in, should write user name near the comment)

When filling the login form, log in to dummy API, store user in store and redirect to UserProfile page.