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構建比較靠譜。