Vue, vue router, vuex

/home/s/home/samundrak/Desktop/vue/00-featured-vuejs-v2-alpha-release.jpgam
undrak/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.

Usage
You 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 VueRouter
VueRouter is a client side routing library by VueJS team for making Single page application.

Routing & Navigating
Defining 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()

VUEX
Vuex 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 Vuex
1. State
2. Getters
3. Mutations
4. Actions
5. Modules

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 together
Vuex Store Vue App

Vuex: Application Structure
export

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

Vue, vue router, vuex

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Vue, vue router, vuex (20)

Recently uploaded (20)

Vue, vue router, vuex