Downloaded 282 times
Uploaded byTakuya Tejima
Vue 2.0 + Vuex Router & Vuex at Vue.js
The document discusses Vue.js 2.0, including its features and improvements such as enhanced rendering speed, separated compiler and runtime, and server-side rendering. It also covers the integration of Vue Router for single-page applications and Vuex for state management, highlighting their functionalities, benefits, and examples. Additionally, it emphasizes community involvement and resources for further learning and support.
Vue 2.0 + Vuex Router & Vuex at Vue.js
- 1. Vue 2.0 ＋ Vue Router& Vuex Indie Inc. Co-founder & CTO Takuya Tejima
- 2. Who • Takuya Tejima@tejitak • Co-founder & CTO at Indie Inc. • Server & Web Front-end, iOS Engineer • DevMorning community founder • http://devmorning.connpass.com/ • Vue.js core team member
- 3. Vue.js MeetUp Tokyo! •2016/5/31 • Vue.js Tokyo v-meetup="#1" • http://vuejs- meetup.connpass.com/event/31139/ • Evan creator of Vue.js joined via Skype! • He said “Vue.js is for everyone, not for a company”
- 4.
- 5. Vue Component Example <template> <divid="app"> <img src="./assets/logo.png"> <h1>{{ msg }}</h1> </div> </template> <script> export default { data () { return { msg: 'Hello Vue 2.0!' } } } </script> <style> body { font-family: Helvetica, sans-serif; } </style> Example of App.vue with webpack https://github.com/vuejs-templates/webpack-simple-2.0
- 6.
- 7. Our JavaScript frameworkis faster than React rendering speed and memory consumption by up to 2-4x in m ww.infoworld.com/article/3063615/javascript/vuejs-lead-our-javascript-framework-is-faster-than-re
- 8. Vue 2.0 Features •Fast! • Rendering layer is based on Snabbdom (a lightweight virtual-DOM implementation) https://github.com/paldepind/snabbdom • Compiler & Runtime are now separated • Reactive! • No need for shouldComponentUpdate / immutable • Template ? JSX? • You can use both with original template & new render function • Sever Side Rendering! (Streaming SSR) • NativeRendering • Compatibility with v1.0
- 9. Vue 2.0 APIChanges • Lots of APIs are deprecated https://github.com/vuejs/vue/issues/2873 • Filter! (e.g. <span v-text="message | reverse"></span>) • only available in text interpolations {{}} • no build-in filters • vm.$dispatch -> Vuex event bus • vm.$appendTo -> Just use native DOM API • v-for $index & $key -> (value, index) in arr, (value, key) in obj • etc.
- 10.
- 11.
- 12. Popular Frameworks forSPA Implementation • How to implement a SPA (Single-page Application) • Backbone, Ember, Riot, Angular + ui-router, Angular2, React + React-Router (+ Redux), Vue.js + Vue-Router (+ Vuex) • Important things to introduce • Does your app really need to be a SPA? • For example, do you need partial rendering? • Choose framework depending on your app characteristics
- 13. What’s Vue-Router • Creatinga SPA with Vue.js + vue-router is dead simple • Not only client-side routing (hash / history API), but also module based URL mapping • Nested routes and sub components • Async load • etc. • The following hooks are available • data, activate, deactivate, canActivate, canDeactivate, canReuse • NOTE The hooks will be changed to onEnter, onLeave, onChange in Vue-Router v0.8.0 • https://github.com/vuejs/vue-router/issues/321
- 14. Nested Routes andSub Components & Hooks Example URL change: /a/b/c -> /a/d/e 2. Validation phase Check if all current components can be activated / deactivated 3. Activation phase Deactivate current components and activate new components with data hook 1. Reusability phase Check reusability
- 15. Code Example main.vue router.map({ '/about': { component:require('./components/about.vue') }, '/user/:userId': { component: require('./components/user/index.vue'), subRoutes: { 'profile/:something': { component: require('./components/user/profile.vue') } }, '*': { component: require('./components/not-found.vue') }, }) app.vue <template> <div> <p v-show="authenticating" style="color:red">Authenticating...</p> <h1>App Header</h1> <a v-link="{ path: '/about' }">about</a> <a v-link="{ path: '/user/1234/profile/what' }">user</a> <a v-link="{ path: '/mypage' }">mypage</a> <router-view class="view" transition="test" transition-mode="out-in" keep- alive></router-view> </div> </template> components/user/index.vue <template> <div> <h2>User yo</h2> <router-view></router-view> </div> </template> components/user/profile.vue
- 16. Authentication router.beforeEach((transition) => { if(transition.to.path === '/mypage') { router.app.authenticating = true // check if the user is authenticated api.checkAuth().then(() => { router.app.authenticating = false // authentication success transition.next() }).catch(() => { router.app.authenticating = false // authentication failed transition.abort() }) } else { transition.next() } }) Example auth page implementation with global before hook
- 17. Is Vue-Router Enough? •If your SPA with Vue-Router has complex component state structures, Vuex could be a solution • Basically, more communications (e.g. dispatch & broadcast) between components leads to unreadable code
- 18.
- 19. Vuex • Official reduxinspired flux framework for Vue.js • Vuex is more fit for Vue.js with efficient reactive system such as data reactive rendering & components systems
- 20. Vuex • Features • Store •basically a container that holds your application reactive states • only way to change a store's state is by explicitly dispatching mutations • Mutation • sync (can not be async) • split into modules with corresponding slice of the state • Action • dispatch mutations • can be async • Advantages • simple unidirectional flow (less side effects) • easy undo/redo - time travel • hot reloading • easy test
- 21. Vuex Flow Summarywith Counter Example
- 22. Mutation Example • Mutation(a name and a handler) mutates states with synchronous functions • Vuex store's state is made reactive by Vue • When we mutate the state, Vue components observing the state will update automatically import Vuex from 'vuex' const store = new Vuex.Store({ state: { count: 1 }, mutations: { INCREMENT (state) { // mutate state state.count++ } } }) store.dispatch('INCREMENT') • Must be called by dispatch in Action
- 23. What’s a Getter •A getter provides accessing way to store data from components • Components are not allowed to directly mutate a state • It allows us to reuse computed methods (e.g. totals, averages) through a getter - Getter Example // getters.js export function filteredMessages (state) { return state.messages.filter(message => message.threadID === state.currentThreadID) } - Component <script> export default { vuex: { getters: { filteredMessages } } } </script> <template> <div> <ul> <li v-for="msg in filteredMessages">{{mgs.title}}</li> </ul> </div> </template> NOTE the design may changed at Vuex 2.0 https://github.com/vuejs/vuex/issues/236
- 24. Vuex Form Handling v-modeldirectly rewrites store data. This is not the Vuex way (throws an error in strict mode) The Vuex way with v-model - Set a getter value to form value - Dispatch action by UI event (e.g. onclick) Template: <input :value="message" @input=“updateMessage”> JS: actions: { updateMessage: ({ dispatch }, e) => { dispatch('UPDATE_MESSAGE', e.target.value) } }
- 25.
- 26.
- 27. Vue-router-sync • Vue Routerx Vuex • Inject (sync) router states to Vuex states • Components can access router data (path, params, query) through vuex getter in components router • https://github.com/vuejs/vuex-router-sync
- 28. SPA with AwesomeVue Family • If your application is not SPA just use Vue.js • If your SPA … • Needs mapping URL for components / partial rendering -> Vue Router • Needs complex component state structure -> Vuex • Needs both above -> Vuex + Vue Router + Vue Router Sync
- 29. Join Vue.js Community •Vuejs-jp Skack • https://vuejs-jp-slackin.herokuapp.com/ • Translations • Vex docs are working in progress • https://github.com/vuejs/vuex/pull/240
- 30.