【Vue】$store不能通过v-model绑定修改数据

原创于 2022-06-19 00:38:13 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

8 篇文章

订阅专栏

博客探讨了Vuex的Unidirectional Dataflow原则，指出v-model不能直接修改state。文章提到，由于v-model的本质是value与input的绑定，可以通过计算属性来实现对store的双向绑定。文中提供了解决方案，即定义一个带有getter和setter的计算属性，允许通过v-model更新store的状态。这种方法确保了状态管理的正确性和应用的可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex 强调的是 Unidirection Dataflow， state 只能被读取，要写入 state 必须靠 mutation ，因此 v-model 无法直接写入 state 。

v-model 本质是 value property binding 与 input event 的 syntatic sugar，因此可以回归基本动作，使用 value 与 input 实现。

对store使用双向绑定会出现下面的情况

解决办法：

使用计算属性

//常见的计算属性
computed: {
        example(){
            return this.$store.state.text //只能返回值，
        },
}
//完整的计算属性
computed: {
        example: {
            set(obj) { //先
                this.$store.state.text = obj; //可以使用v-model传入的数据对store进行操作
            }, get() { //后
                return this.$store.text
            }
        },
}