vuejs vuex use state in two way binding without mutation (v-model)

Question

I know that I am supposed to use mutations to change state. However I was wondering if it is theoretivally possible to use state in a v-model binding.

My current solution:

html:

...
<input v-model='todo'>
...

with mutation:

...
 computed: {
            todo: {
                get () { return this.$store.state.todos.todo },
                set (value) { this.$store.commit('updateTodo', value) }
            }
        }
...

without mutation

...
 computed: {
            todo: {
                get () { return this.$store.state.todos.todo },
                set (value) { this.$store.state.todos.todo = value }
            }
        }
...

what I would like:

...
<input v-model='this.$store.state.todos.todo'>
...

Answer 1

You can directly bind a Vuex state property to a component or input via v-model:

<input v-model='$store.state.todos.todo'>

But this is strongly recommended against. Vuex will warn you that you are mutating the state outside of a mutation function.

Since, when using Vuex, your state object is your source of truth which is designed to only be updated in a mutation function, it will quickly become hard to debug why the global state is changing if one component is affecting the global state without calling a mutation.

Most people, I believe, would recommend using your computed todo property example with mutations for the scenario you're describing.