Vuex 表单处理

严格模式下的Vuex，在属于 Vuex 的 state （状态）上使用v-model时会比较棘手：

假设obj计算的属中返回一个对象，在用户输入时，v-model会尝试直接修改obj.message。在严格模式下，因为修改不在Vuex mutation handler中执行,将会抛出一个错误。

用“Vuex思维”去处理是给绑定value（值），然后帧听或change事件，并在回调中调用action：

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

在这里使用 mutation handler(变更句柄):

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

双向计算属性

必须承认，上述比v-model+本机状态(local state)啰嗦得多，以及从v-model中弃用了一些有用的功能。使用 setter 双向计算属性的另一种方法：

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