vue + vuex

<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>

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 {
         //操作不成功时操作
      }
  },