vue + vuex 表單處理

使用場景：在一個表單中，各項數據提交后需要重置表單中各<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>元素代替。 

---

你以為這樣就可以了嗎？太天真了少年！初次提交后，表單是會重置，但是只要再次在<input>里輸入了內容，開發工具里立即監控到錯誤：

官方文檔說的清楚(http://vuex.vuejs.org/zh-cn/forms.html)：

當在嚴格模式中使用 Vuex 時，在屬於 Vuex 的 state 上使用 v-model 會比較棘手：

<input v-model="obj.message">
假設這里的 obj 是在計算屬性中返回的一個屬於 Vuex store 的對象，在用戶輸入時，v-model 會試圖直接修改 obj.message。在嚴格模式中，由於這個修改不是在 mutation 函數中執行的, 這里會拋出一個錯誤。

辦法倒是有，按官方給出的解決方案，是為每個屬性添加get/set屬性，但在一般的信息系統中，錄入頁面起碼幾十個<input>元素，為每個元素建立get/set屬性，再在Vuex存儲文件里建立相應的state get action mutation!需要添加的代碼太多了！！！不現實。

為解決這個問題，在網上找了半天答案，找到的例子都是些習作，一個表單2個錄入框，3-4個頁面的學習型小小型項目，根本沒有大型的應用的例子！

 現在卡在這兒了！

其實要解決也簡單：只要改個參數即可：

export default new Vuex.Store({
  actions,
  getters,
  modules: {
   
  },
  //不采用嚴格模式
  //strict: debug strict: false
})

但這樣好像不符合官方建議的規范！

經過這個月來的實踐，感覺Vue在開發應用系統方面坑太多了，雙向綁定是不錯，但是使用了Vuex后立馬變成坑了！！！目前階段只能用來做些簡單的系統，邏輯復雜的系統還是采用傳統的java C# php構建比較靠譜。