当使用vue构建大型应用时，使用vuex管理一部分状态是很好的选择。

但是因为vuex的状态要通过mutation handler改变，这就意味着在表单中无法使用v-model的双向绑定。

处理方式主要有以下2种。

使用:value而不是v-model

这个方法是官方文档里给出来的，具体方法如下：

1

<input :value="person.name" @input="updatePersonName" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// ...
import { updatePerson } from '../vuex/person/actions';
// ...
vuex: {
  getters: {
    person({ person }) {
      return person;
    }
  },
  actions: {
    updatePerson
  }
},
methods: {
  updatePersonName(e) {
    this.updatePerson('name', e.target.value);
  }
}
// ...

这个方法在使用中文输入法会存在问题，所以为了处理好中文输入，需要考虑其他方法。

使用临时变量和v-model

另一个方法是使用临时变量和v-model，这是我更喜欢使用的方法。

1

<input v-model="tmpName" @input="updatePersonName" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// ...
import { updatePerson } from '../vuex/person/actions';
// ...
data() {
  return {
    tmpName: ''
  };
},
vuex: {
  getters: {
    person({ person }) {
      return person;
    }
  },
  actions: {
    updatePerson
  }
},
methods: {
  updatePersonName() {
    this.updatePerson('name', this.tmpName);
  }
},
ready() {
  this.tmpName = this.person.name;
}
// ...

这个方法和上一个方法主要有3处不同：

  1. 使用v-model进行双向绑定
  2. 使用临时变量存储要改变的状态
  3. 在组件生命周期的ready阶段给临时变量赋值

参考

vuex表单处理

Vuex multiple fields / forms tips