vuex 表单字段映射工具 vuex-map-fields

vuex在处理表单的时候显得很麻烦，要一个字段一个字段的去写set和get还有mutation，字段多的话带来的工作量将是非常巨大的。vuex-map-fields将能很好的解决这个问题。

vuex-map-fields的github： https://github.com/maoberlehner/vuex-map-fields

安装：

npm install vuex-map-fields -S

首先在vue组件中引入createHelpers

import {createHelpers} from 'vuex-map-fields'

// `fooModule` is the name of the Vuex module.
const { mapFields } = createHelpers({
  getterType: `fooModule/getField`,
  mutationType: `fooModule/updateField`  // module/固定写法
})

接下来在computed中映射字段

  computed: {
    ...mapFields([
      'form.Receiver',
      'form.Phone',
    ]),
　}

组件中使用v-model绑定字段

  <mt-field label="收货人" v-model="Receiver" placeholder="姓名"></mt-field>
  <mt-field label="联系方式" v-model="Phone" placeholder="手机号码"></mt-field>

来到module文件，填写state的初始状态

const initState = {
  form: {
    Receiver: '',
    Phone: ''
  }
}

引入getField和updateField

import { getField, updateField } from 'vuex-map-fields'

将两个方法分别在getters和mutations中挂载

const getters = {
  getField
}

const mutations = {
  updateField
}

这样就完成了表单的绑定流程。即使使用严格模式也可以轻松的使用v-model而不需编写set get。