Vue, vue router, vuex

Vue, vue router, vuex

• 1.
  /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
• 2.
  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.
• 3.
  Usage You can simplycreate an .html file and include Vue with:
• 4.
  Vue Components Components are oneof 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.
• 5.
  Single File Components Inmany 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:
• 6.
  we can usepreprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.
• 7.
  Routing Vue Appswith VueRouter VueRouter is a client side routing library by VueJS team for making Single page application.
• 8.
  Routing & Navigating Definingroutes. Injecting routes to app
• 9.
  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()
• 10.
  VUEX Vuex is astate 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.
• 11.
  Problems of localstates & 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.
• 12.
  So Vuex ● Vuexis 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
• 13.
  Core Concepts ofVuex 1. State 2. Getters 3. Mutations 4. Actions 5. Modules
• 14.
  Core Concepts ofVuex
• 15.
  Vuex: State Vuex usesa 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
• 16.
  Vuex: State Vuex usesa 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
• 17.
  Vuex: mapState When acomponent 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
• 18.
  Vuex: Getters Sometimes wemay need to compute derived state based on store state, for example filtering through a list of items and counting them Declaring Accessing
• 19.
  Vuex: mapGetters The mapGettershelper simply maps store getters to local computed properties:
• 20.
  Vuex: Mutations It isa 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
• 21.
  Vuex: Commiting Mutations Toinvoke a mutation handler, you need to call store.commit with its type 1 2
• 22.
  Vuex: Actions Actions aresimilar to mutations, the difference being that: ● Instead of mutating the state, actions commit mutations. ● Actions can contain arbitrary asynchronous operations. export
• 23.
  Vuex: Dispatching Actions Actionssupport the same payload format and object-style dispatch:
• 24.
  Vuex: Async Actions Forasynchronous 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
• 25.
  Vuex: Modules Due tousing 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
• 26.
  Putting Vuex andVue together Vuex Store Vue App
• 27.
  Vuex: Application Structure export
• 28.
  References ● https://vuejs.org ● https://vuex.vuejs.org ●http://router.vuejs.org/
• 29.
  ThankVue ThankYou &