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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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"
    }
    }
    },
    /* ... */
    }

    View Slide

  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

    View Slide

  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
    }
    }
    }

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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 () {
    /* ... */
    }
    }

    View Slide

  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

    View Slide

  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

    View Slide

  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="updateSearchEvent">
    @click="save">save
    actions: {
    saveSearch ({ commit }, value) {
    // something asynchronous first
    // later commit things
    setTimeout(() => {
    commit('updateSearch', value)
    }, 1000)
    }
    }
    mutations: {
    updateSearch(state, value) {
    state.value = value
    }
    }
    state: {
    value: ""
    }

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide