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.

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