How to stay sane while managing complex state, in Vue.js
Submitted by Hassan Djirdeh (@djirdehh) on Tuesday, 20 March 2018
Is managing large amounts of data on the client-side of your application giving you bit of a headache? Don’t worry! I’ll show you some neat ways in how the Vue framework makes managing data a breeze.
Like any other front end framework, components in Vue need to manage information among each other. At a certain point, applications cross a threshold where it becomes incredibly important to have appropriate state management for the predictability and maintainability of components! This talk will demonstrate various ways to help you stay sane while managing complex state in Vue.
Vue gives us multiple different ways to manage data between components such as using props, individual custom events, an event bus, a simple store and/or Vuex.
This talk will highlight with real-world examples:
What props are and how to use them. What custom events are and when should they best be used. How to set up a global event bus for application wide event listening, and the cons associated with this approach. How a global event system can be refactored to a simple global store that is shared between components. The limitations of having a simple store and why/how at some point, Vuex is the most appropriate method for managing state for medium to large applications. Ways to organize and architect the structure of an ever-growing Vuex store.
An engineering graduate and a self-taught web developer, Hassan is currently a Front End Engineer for the App Platform team within Shopify. Prior to being at Shopify, Hassan wore different hats as a Technology Consultant within Deloitte Digital, helping different clients build and scale their front-end applications. Hassan is also the lead author of Fullstack Vue, an in-depth book into building real world Vue.js applications.