Vue3组合式API中computed结合v-model与Vuex的双向绑定问题

不用非得改用v-bind:value加@input的写法，给计算属性添加setter就能直接通过v-model触发Vuex的mutation，完美适配v-model的双向绑定逻辑。

实现代码示例 #

模板部分保持v-model不变：

<input type="text" :id="phone" v-model="phone" />

脚本部分给computed添加setter：

import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
    setup() {
        const store = useStore()
        // 带 setter 的计算属性
        const phone = computed({
            // getter：从 Vuex 获取状态
            get() {
                return store.getters['getPhone']
            },
            // setter：触发 mutation 修改状态
            set(newValue) {
                // 替换为你项目中实际的 mutation 名称
                store.commit('UPDATE_PHONE', newValue)
            }
        })
        return { phone }
    }
}

原理说明 #

• 输入框取值时，v-model会调用computed的getter，从Vuex的getter中获取数据
• 用户修改输入内容时，v-model会自动调用computed的setter，把新值传入并触发对应的mutation更新Vuex状态

这种写法既保留了v-model的简洁性，又遵循了Vuex的状态修改规范，无需额外编写包装函数。

内容的提问来源于stack exchange，提问作者Steve L