Handling State in Vue.js Applications

.consulting .solutions .partnership
Handling State in Vue.js Applications
Alexander Schwartz, Principal IT Consultant
Vue.js Frankfurt Meetup, 2019-02-07

View Slide

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
What is State
1
2
3
4
5
6

View Slide

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

What is State
Everything in the View-Model is State
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
What is State
1
2
3
4
5
6

View Slide

We own the state, and are free to change it
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
What is State
1
2
3
4
5
6

View Slide

Photo by Jude Beck on Unsplash
Multiple Components access the same Model

View Slide

Multiple Components access the same Model
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
What is State
1
2
3
4
5
6

View Slide

Photo by Luiz Guimaraes on Unsplash
Multiple Components communicate via Messages

View Slide

Multiple Components communicate via Messages
• 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
What is State
1
2
3
4
5
6

View Slide

Photo by Andrew Neel on Unsplash
Global State injected

View Slide

https://vuejs.org/v2/guide/state-management.html
• 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

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
What is State
1
2
3
4
5
6

View Slide

https://vuex.vuejs.org/
Global State w/ optimized debugging and handling
• 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

Using a Store w/ code examples
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

Vuex vs. „simpler“ (?) state handling
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

Links
Vue.js State management
Vuex
https://vuex.vuejs.org/
Source Code Examples
https://github.com/ahus1/state-handling-in-vue
@ahus1de

View Slide

.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

Handling State in Vue.js Applications

Handling State in Vue.js Applications

Alexander Schwartz

More Decks by Alexander Schwartz

Other Decks in Programming

Featured

Transcript