To understand the state management pattern in Vuex, let's take a look at a simple Vue app that we are already familiar with:
<div id="app"></div>
new Vue({
// state
data () {
return { message: '' }
},
// view
template: `
<div>
<p>{{ message }}</p>
<button v-on:click="greet">Greet</button>
</div>
`,
// actions
methods: {
greet () {
this.message = 'Hello World'
}
}
}).$mount('#app')
This simple app has the following parts:
- state, which holds the source of the app
- view, which maps the state
- actions, which can be used to mutate the state from the view
They work perfectly and are easy to manage in a small app like this, but this simplicity becomes unsustainable and problematic when we have two or more components sharing the same state, or when we want to mutate the state with actions from different views.
Passing props...
