vue, vue router, vuex

29
/home/s/home/samundrak/Desktop/vue/00-featured-vuejs-v2-alpha-release.jpg am undrak/Desktop/vue/00-featured-vuejs-v2-alpha-release.jpg Vue, VueRouter & Vuex Samundra Khatri

Upload: samundra-kc

Post on 25-Jan-2017

144 views

Category:

Presentations & Public Speaking


1 download

TRANSCRIPT

/home/s/home/samundrak/Desktop/vue/00-featured-vuejs-v2-alpha-release.jpgamundrak/Desktop/vue/00-featured-vuejs-v2-alpha-release.jpg

Vue, VueRouter & Vuex

Samundra Khatri

What is Vue?Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

UsageYou can simply create an .html file and include Vue with:

Vue Components

Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate

reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the

special is attribute.

Single File Components

In many Vue projects, global components will be defined using Vue.component, followed by new Vue({ el: '#container' }) to target a container element in the body of every page.This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:

we can use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.

Routing Vue Apps with VueRouterVueRouter is a client side routing library by VueJS team for making Single page application.

Routing & NavigatingDefining routes. Injecting routes to app

Routing & Navigating● router.push('home') // literal string● router.push({ path: 'home' }) // object● router.push({ name: 'user', params: { userId: 123 }}) // named route● router.push({ path: 'register', query: { plan: 'private' }}) // with query, resulting

in /register?plan=private● router.go(1) // go forward by one record, the same as history.forward()● router.go(-1) // go back by one record, the same as history.back()

VUEXVuex is a state management pattern +

library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that

the state can only be mutated in a predictable fashion. It also integrates with

Vue's official devtools extension to provide advanced features such as

zero-config time-travel debugging and state snapshot export / import.

Problems of local states & need of Vuex● States can be mutate by any child or sibling components.● Once app will grow we will lost on searching the code where the state has

been mutated.● To much event listeners and emitters.● Once component will be destroyed all component state will be gone. ● No chance of recovery of lost old component state.● Have to define same states for every components.● Violation of Single source of truth.

So Vuex● Vuex is like kathmandu where every thing

is stored and available.● Single source of truth● No state loss while any component is

destroyed● Centralized data store, can be fetched

from any component at anytime.● No direct mutation of state from any

component at any time

Core Concepts of Vuex1. State 2. Getters3. Mutations4. Actions5. Modules

Core Concepts of Vuex

Vuex: State Vuex uses a single state tree - that is, this single object contains all your application level state and serves as the "single source of truth". This also means usually you will have only one store for each application. A single state tree makes it straightforward to locate a specific piece of state, and allows us to easily take snapshots of the current app state for debugging purposes.

export

Declaring

Vuex: State Vuex uses a single state tree - that is, this single object contains all your application level state and serves as the "single source of truth". This also means usually you will have only one store for each application. A single state tree makes it straightforward to locate a specific piece of state, and allows us to easily take snapshots of the current app state for debugging purposes.

export

Accessing

Vuex: mapState When a component needs to make use of multiple store state properties or getters, declaring all these computed properties can get repetitive and verbose. To deal with this we can make use of the mapState helper which generates computed getter functions for us and help us save some keystrokes:

export

Vuex: Getters Sometimes we may need to compute derived state based on store state, for example filtering through a list of items and counting them

Declaring Accessing

Vuex: mapGetters The mapGetters helper simply maps store getters to local computed properties:

Vuex: Mutations It is a commonly seen pattern to use constants for mutation types in various Flux implementations. This allow the code to take advantage of tooling like linters, and putting all constants in a single file allows your collaborators to get an at-a-glance view of what mutations are possible in the entire application

export

Vuex: Commiting Mutations To invoke a mutation handler, you need to call store.commit with its type

1 2

Vuex: Actions Actions are similar to mutations, the difference being that:

● Instead of mutating the state, actions commit mutations.

● Actions can contain arbitrary asynchronous operations.

export

Vuex: Dispatching Actions Actions support the same payload format and object-style dispatch:

Vuex: Async Actions For asynchronous task like api calls or for delays we can use actions to commit mutations when api call is success or failed. Also we can map actions like getters or state.

export

Vuex: Modules Due to using a single state tree, all state of our application is contained inside one big object. However, as our application grows in scale, the store can get really bloated.

To help with that, Vuex allows us to divide our store into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules - it's fractal all the way down:

export

Putting Vuex and Vue togetherVuex Store Vue App

Vuex: Application Structure export

References● https://vuejs.org● https://vuex.vuejs.org● http://router.vuejs.org/

ThankVueThankYou

&