Large Application Patterns with Vuex Chapter 18this.newMessage = ''
},
close (index) {
store.commit('removeMessage', index)
}
}
})You can now launch the app and start broadcasting messages to our imaginary users:
How it works...
I think it's important to note the names of the mutations; they are called pushMessage and
removeMessage, but what they really do in this application is show the message in a stack
on the screen and (fictionally) broadcast messages to users. Would it be better to call them
showMessage, or broadcastMessage and hideMessage? No, that's because there has to
be a clear separation of intent between the mutation itself and the particular effects of that
mutation. The problem becomes clear when, for example, we decide to give users the
ability to ignore these notifications or we introduce a delay before actually broadcasting the
notifications. Then we will have a showMessage mutation that does not actually show a
message.
The computed syntax we have used is as illustrated:
computed: Vuex.mapState(['messages'])