vuejs vuex 在没有突变的情况下以两种方式绑定使用状态（v-model）

Question

我知道我应该使用突变来改变状态。但是我想知道理论上是否可以在 v-model 绑定中使用状态。

我目前的解决方案：

html:

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

有突变：

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

无突变

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

我想要什么：

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

Answer 1

您可以直接将 Vuex 状态属性绑定到组件或通过 v-model 输入：

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

但强烈反对。 Vuex 会警告你你正在改变一个变异函数之外的状态。

因为在使用 Vuex 时，您的状态对象是您的真实来源，它被设计为仅在变异函数中更新，很快就会变得很难调试为什么如果一个组件在不调用突变的情况下影响全局状态，则全局状态正在发生变化。

我相信大多数人会建议使用您计算的 todo 属性示例，其中包含针对您描述的场景的突变。

vuejs vuex 在没有突变的情况下以两种方式绑定使用状态（v-model）

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

vue.js

vuex

two-way