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

╰半夏微凉° 2021-10-01 04:44 403阅读 0赞

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

vuex-map-fields的github： [https://github.com/maoberlehner/vuex-map-fields][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。

转载于:https://www.cnblogs.com/axel10/p/9273017.html

[https_github.com_maoberlehner_vuex-map-fields]: https://github.com/maoberlehner/vuex-map-fields

发表评论取消回复

表情：

评论列表（有 0 条评论，403人围观）

还没有评论，来说两句吧...

相关阅读

相关 form表单字段默认值

form表单中input的text类型字段如果不填值的话，默认值为空串，即“”；我现在的需求是：让不填的字段值为 null。实现方式：将这个字段的disabled设

本是古典何须时尚/ 2023年06月08日 06:43/ 0 赞/ 13 阅读

相关隐藏表单字段_像Pro一样构建OctoberCMS表单字段小部件

隐藏表单字段 ![OctoberCMS logo][] Creating your business website with any CMS requires you t

川长思鸟来/ 2022年12月03日 09:27/ 0 赞/ 193 阅读

相关 JS_表单字段验证常用正则表达式

function checkPhone(phone){ if(!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567

拼搏现实的明天。/ 2022年10月20日 13:52/ 0 赞/ 177 阅读

相关 html特定字段表紅,如何通过HTML访问Django表单字段

添加name并传递modelname，像这样的变化. 然后提交你的表格。在例如，假设注册表格：表单.py， ^\{pr2\}$ 视图.py，def signu

ゞ浴缸里的玫瑰/ 2022年10月05日 12:48/ 0 赞/ 170 阅读

相关 django模型字段和表单字段对应

<table style="border-spacing:0px;max-width:100%;background-color:rgb(238,238,238);width:

男娘i/ 2022年05月28日 09:23/ 0 赞/ 209 阅读

相关 FormData表单字段数据对象

FormData接口提供了一种方法，可以轻松地构造一组表示表单字段及其值的键/值对，然后使用xmlsend.send()方法轻松地发送这些值。如果将编码类型设置为“多部分/表单

ゝ一世哀愁。/ 2022年05月13日 09:12/ 0 赞/ 239 阅读

相关 vue如何使用rules对表单字段进行校验

基于element-ui 1、在代码中，添加属性：rules <el-form :model="form" :rules="rules" ref="form" la

蔚落/ 2022年05月12日 11:54/ 0 赞/ 270 阅读

相关后台单字段修改，更新

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

╰半橙微兮°/ 2022年03月21日 13:38/ 0 赞/ 209 阅读

相关表单字段的校验

今天做了vue一个表单字段的校验比如:我现在有一个输入框,我要判断该框必填 <Form ref="importForm" > <Input v-mo

逃离我推掉我的手/ 2022年03月15日 06:36/ 0 赞/ 490 阅读

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

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

╰半夏微凉°/ 2021年10月01日 04:44/ 0 赞/ 404 阅读