Form One way binding with vuex - vue.js

Question

In my application, I use a 2 way binding with vuex:
messageContent: {
get () {
return store.getters.messageContent
},
set (value) {
store.commit('updateContent', value)
}
},
<b-form-textarea id="content" v-model="messageContent" :rows="3"></b-form-textarea>
<b-button size="sm" variant="primary" value="Cancel" aria-label="Cancel" #click.prevent='onCancel'>
<i class="fa fa-times" aria-hidden="true"></i> Cancel
</b-button>
Since mutation of the prop occurred already, if I click cancel edit button:
methods: {
onCancel () {
this.isEdit = !this.isEdit
}
}
how do I rollback?
I figured one way is the solution, but I'm not sure how to implementation it with vuex.

Answer 1

I think you need something like in this example, you need to clearly distinguish what is old content - old state and what new content - new state. Something, as this is simplified, yet working example.
var store = new Vuex.Store({
state: {
savedContent: 'Previous content'
},
mutations: {
saveContent (state, value) {
state.savedContent = value
}
}
})
new Vue ({
el: '#app',
store,
data: {
newContent: store.state.savedContent
},
methods: {
save () {
this.$store.commit('saveContent', this.newContent)
},
cancel () {
this.newContent = this.$store.state.savedContent
}
}
})
<div id="app">
<textarea v-model="newContent"></textarea><br>
<button #click="save">save</button>
<button #click="cancel">cancel</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>