vue + vuex

Posted 2020-08-23 福爷

使用场景：在一个表单中，各项数据提交后需要重置表单中各<input>元素的值为空。

组件中关联：

<template>
     <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="排序号">
          <el-input v-model="form.sort" placeholder="请输入排序号"></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="form.categoryCode" placeholder="请输入种类编号/代码"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.categoryName" placeholder="请输入种类名称"></el-input>
        </el-form-item>
        <el-form-item label="禁用">
          <input type="checkbox" v-model="form.status" />禁用
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
</template>
<script>
  import { mapGetters, mapActions } from ‘vuex‘
  export default {

   computed: mapGetters({
        form:"categoryForm"
    }),
    methods: {
      ...mapActions({
        onSubmit:"addCategory"
      })
    }
  }
</script>

 

vuex中的配置为：

const state = {
   // 初始化表单
   _categoryForm: {}
}

const getters = {
  //类别表单
  categoryForm: state => state._categoryForm
}

const actions = {
 
  /**
   * 新增类别
   */
  addCategory(context) {
    var formData = context.getters.categoryForm
    //Web API 调用
    dictServer.addCategory(formData, function (body) {
      //成功回调函数
      context.commit("DICT_ADDED_CATEGORY", true, body)
    }, function (body) {
      //失败回调函数
      context.commit("DICT_ADDED_CATEGORY", false, body)
    });
  }
}

const mutations = {
   //新增类别后
  [types.DICT_ADDED_CATEGORY](state, isSuccess, body) {
    if (isSuccess) {
      //state._categoryForm = {}  //不起作用，必须使用下面的方法
      state._categoryForm = {
         sort:"",
         categoryCode: "",
         categoryName: "",
         status:false,
         remark:""
      }
      //其他操作
      } else {
         //操作不成功时操作
      }
  },

看红字部分，初始化时 直接赋值为空对象即可（_categoryForm: {} ） ,但新增成功后，重置表单 state._categoryForm = {}  却不起作用，必须对其每个元素单项设置才起作用：

      state._categoryForm = {
         sort:"",
         categoryCode: "",
         categoryName: "",
         status:false,
         remark:""
      }

---

另：element-ui（1.0.6） 中的 Switch开关 Radio单选框  Checkbox多选框 对于空元素无能为力，不是滑块移动不了，就是点击没有反应，现只能用原生的<input>元素代替。