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.

5f528a3f6814d28b583f31842e3e8d9e?s=128

Alexander Schwartz

February 07, 2019
Tweet

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 alexander.schwartz@msg.group @ahus1de msg systems ag (Headquarters) Robert-Buerkle-Str. 1, 85737 Ismaning Germany www.msg.group