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
扫描二维码关注公众号,回复:
1910031 查看本文章
import { getField, updateField } from 'vuex-map-fields'
将两个方法分别在getters和mutations中挂载
const getters = {
getField
}
const mutations = {
updateField
}
这样就完成了表单的绑定流程。即使使用严格模式也可以轻松的使用v-model而不需编写set get。