Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Handling State in Vue.js Applications

Handling State in Vue.js Applications

This is an intro-talk how to handle state in Vue.js applications.
It shows briefly the different alternatives Single Component, Parent-Child, Event Bus, Simple Global State and finally Vuex

It is accompanied by a live demo and a code repository.

Alexander Schwartz

February 07, 2019
Tweet

More Decks by Alexander Schwartz

Other Decks in Programming

Transcript

  1. .consulting .solutions .partnership Handling State in Vue.js Applications Alexander Schwartz,

    Principal IT Consultant Vue.js Frankfurt Meetup, 2019-02-07
  2. Handling State in Vue.js Applications 2 © msg | January

    2019 | Handling State in Vue.js Applications | Alexander Schwartz What is State 1 Minimal: Single Component 2 Hierarchy: Parent-Child 3 Horizontal: Event Bus 4 Inversion of State: Simple Global State 5 Inversion of State: Vuex 6
  3. Handling State in Vue.js Applications 3 © msg | January

    2019 | Handling State in Vue.js Applications | Alexander Schwartz What is State 1 Minimal: Single Component 2 Hierarchy: Parent-Child 3 Horizontal: Event Bus 4 Inversion of State: Simple Global State 5 Inversion of State: Vuex 6
  4. What is State Photo by Aaron Burden on Unsplash ©

    msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 4 export default { data () { return { person: { firstname: "Theo", lastname: "Tester" } } }, /* ... */ } Everything in the View-Model is State
  5. What is State Everything in the View-Model is State ©

    msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 5 We need state • to display information • to validate and act on data • to share with other component export default { data () { return { person: { firstname: "Theo", lastname: "Tester" } } }, /* ... */ }
  6. Handling State in Vue.js Applications 6 © msg | January

    2019 | Handling State in Vue.js Applications | Alexander Schwartz What is State 1 Minimal: Single Component 2 Hierarchy: Parent-Child 3 Horizontal: Event Bus 4 Inversion of State: Simple Global State 5 Inversion of State: Vuex 6
  7. Minimal: Single Component We own the state, and are free

    to change it © msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 7 We change the state • to reflect a changed route • after we load data from the backend • on user input export default { data () { return { person: { firstname: "", lastname: "Tester" } } }, watch: { "$route.params.text": { handler: function (newValue) { this.person.firstname = newValue }, immediate: true } } } <input v-model="person.firstname">
  8. Handling State in Vue.js Applications 8 © msg | January

    2019 | Handling State in Vue.js Applications | Alexander Schwartz What is State 1 Minimal: Single Component 2 Hierarchy: Parent-Child 3 Horizontal: Event Bus 4 Inversion of State: Simple Global State 5 Inversion of State: Vuex 6
  9. Hierarchy: Parent-Child Photo by Jude Beck on Unsplash Multiple Components

    access the same Model © msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 9
  10. Hierarchy: Parent-Child Multiple Components access the same Model © msg

    | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 10 Common: • all components read from the same model (passed on via props) • displayed values change in all components (based on Vue.js’ reactivity) Alternatives for Model Ownership: • Read Only: Child Components only read data, but never modify • Global Model: All components allowed to write (bad practice) • Events-Model fine grained: Childs fires events on single key strokes on each field • Events-Model coarse grained: Children fires events after validation of multiple fields Parent Child 1 Child 2
  11. Handling State in Vue.js Applications 11 © msg | January

    2019 | Handling State in Vue.js Applications | Alexander Schwartz What is State 1 Minimal: Single Component 2 Hierarchy: Parent-Child 3 Horizontal: Event Bus 4 Inversion of State: Simple Global State 5 Inversion of State: Vuex 6
  12. Horizontal: Event Bus Photo by Luiz Guimaraes on Unsplash Multiple

    Components communicate via Messages © msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 12
  13. Horizontal: Event Bus Multiple Components communicate via Messages © msg

    | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 13 • State is within the components • Components send events to the Event Bus Challenges: • Order of component creation might be undefined • Not using Vue.js’ reactivity model Component 2 Component 1 Event Bus
  14. Handling State in Vue.js Applications 14 © msg | January

    2019 | Handling State in Vue.js Applications | Alexander Schwartz What is State 1 Minimal: Single Component 2 Hierarchy: Parent-Child 3 Horizontal: Event Bus 4 Inversion of State: Simple Global State 5 Inversion of State: Vuex 6
  15. Inversion of State: Simple Global State Photo by Andrew Neel

    on Unsplash © msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 15 Global State injected
  16. Inversion of State: Simple Global State https://vuejs.org/v2/guide/state-management.html Global State injected

    © msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 16 • State is external to components • Multiple components use the same state Component 2 Component 1 const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth }) State
  17. Inversion of State: Simple Global State https://vuejs.org/v2/guide/state-management.html Global State injected

    © msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 17 Best Practices: • Use model only read-only • Use methods to encapsulate modification var vmA = new Vue({ data: { privateState: {}, sharedState: store.state } }) var vmB = new Vue({ data: { privateState: {}, sharedState: store.state } }) var store = { state: { message: 'Hello!' }, setMessageAction (newValue) { /* ... */ }, clearMessageAction () { /* ... */ } }
  18. Handling State in Vue.js Applications 18 © msg | January

    2019 | Handling State in Vue.js Applications | Alexander Schwartz What is State 1 Minimal: Single Component 2 Hierarchy: Parent-Child 3 Horizontal: Event Bus 4 Inversion of State: Simple Global State 5 Inversion of State: Vuex 6
  19. Inversion of State: Vuex https://vuex.vuejs.org/ Global State w/ optimized debugging

    and handling © msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 19 • Global State exists outside of components • Global State is modified only by Mutations • Actions combine multiple Mutations • Global State, Mutations and Actions are selectively mapped to Components as computed properties and methods Components can combine Vuex state with local state to satisfy different needs: • Data only the components needs • Staging data for form handling including validation Component 2 Component 1 State
  20. Inversion of State: Vuex Using a Store w/ code examples

    © msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 20 updateSearchEvent(e) { this.updateSearch(e.target.value) }, save() { this.saveSearch(/* ... */) }, ...mapMutations('search', [ 'updateSearch' ]), ...mapActions('search', [ 'saveSearch' ]) computed: { ...mapState('search', { search: state => state.value }) } <input :value="search" @input="updateSearchEvent"> <button @click="save">save</button> actions: { saveSearch ({ commit }, value) { // something asynchronous first // later commit things setTimeout(() => { commit('updateSearch', value) }, 1000) } } mutations: { updateSearch(state, value) { state.value = value } } state: { value: "" }
  21. Inversion of State: Vuex Vuex vs. „simpler“ (?) state handling

    © msg | January 2019 | Handling State in Vue.js Applications | Alexander Schwartz 24 CONTRA Vuex • Additional Code • Mutations and Actions as another level of indirection • Additional concepts • Indirection to handle form inputs PRO Vuex • Logic and state handled in one location and no longer distributed in application • Testable independent of GUI • Support in Vue.js DevTools to show state • Time travel debugging • Protected Read Model
  22. Links © msg | January 2019 | Handling State in

    Vue.js Applications | Alexander Schwartz 25 Vue.js State management https://vuejs.org/v2/guide/state-management.html Vuex https://vuex.vuejs.org/ Source Code Examples https://github.com/ahus1/state-handling-in-vue @ahus1de
  23. .consulting .solutions .partnership Alexander Schwartz Principal IT Consultant +49 171

    5625767 [email protected] @ahus1de msg systems ag (Headquarters) Robert-Buerkle-Str. 1, 85737 Ismaning Germany www.msg.group