When we use two-way data binding with a v-model in a Vue app, the data in the Vue instance is synchronized with the v-model input field. So, when you type anything into the input field, the data will be updated immediately. However, this will create a problem in a Vuex store because we must not mutate the store state (data) outside the mutations property. Let's take a look at a simple two-way data binding in a Vuex store:
// vuex-non-sfc/handling-forms/v-model.html
<input v-model="user.message" />
const store = new Vuex.Store({
strict: true,
state: {
message: ''
}
})
new Vue({
el: 'demo',
store: store,
computed: {
user () {
return this.$store.state.user
}
}
})
For this example, you will see the following error message in your browser's debug tool when typing a message in the input field:
Error: [vuex] do not mutate vuex store state outside mutation handlers.
This is because the v-model attempts...