vuejs vuex在没有变异的情况下使用双向绑定状态(v-model)

时间:2017-05-30 20:52:30

标签: vue.js vuex two-way

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

我目前的解决方案:

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'>
...

1 个答案:

答案 0 :(得分:2)

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

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

强烈推荐。 Vuex会警告你,你正在改变突变功能之外的状态。

因为,当使用Vuex时,你的状态对象是你的真实来源,它被设计为只能在变异函数中更新,很快就会很难调整全局状态发生变化的原因一个组件正在影响全局状态而不会调用突变。

我相信,大多数人会建议您使用计算出来的todo属性示例,其中包含您正在描述的方案的突变。