Vuex 和 v-model 的水乳交融

今天被问到一个问题：Vuex 中的数据如何用 v-model 绑定到组件？

Vuex 的基本原则

我们知道，Vuex 的规则是：

对于 state 的变更，同步用 commit / mutations，异步用 dispatch / actions

对于 v-model 常用的场景，就是表单的输入输出，通常可以定义为一种同步的数据变更，即采用 commit / mutations 的方式。

v-model 是什么？

v-model 是语法糖。

1. 通过 v-bind 绑定数据
2. 通过 input 或 change 事件传递变更的数据

Solution

经过上面两部分的梳理，就很容易把两者相结合起来。

<input :value="message" @input="updateMessage" />

computed: {
    ...mapState({
        message: state => state.message
    })
},
methods: {
    updateMessage (ev) {
        this.$store.commit('updateMessage', ev.target.value);
    }
}

mutations: {
    updateMessage (state, message) {
        state.message = message;
    }
}

Better Solution

<input v-model="message" />

computed : {
    message: {
        get() {
            return this.$store.state.message;
        },
        set(value) {
            this.$store.commit('updateMessage', value);
        }
    }
}

The Last and the Most Important

对于没有第一时间答上来这个问题，事后想想还是很羞耻的，毕竟曾经在工作中解决过这类问题。暴露出来的事情是：缺乏总结，对于一种或一类问题，可以对它的解决方案进行提炼和思考，以至于下一次再碰到的时候不会出现这种似曾相识但又很陌生的尴尬感。 搜索引擎是个好产品，它可以帮助人们解决各种各样的问题。但如果太依赖它的话，人会逐渐失去独立思考和解决问题的能力。 如果要成为一个好的工程师，在解决问题的同时，要定期复盘，这样才能得到真正的成长。