Download - Vue, vue router, vuex
/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.
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 & 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
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: 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: 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
References● https://vuejs.org● https://vuex.vuejs.org● http://router.vuejs.org/