フォーム全体をvuexで保存する

Question

私はVueとVuexから始めて、フォーム全体をAPIに保存する方法を知りたいと思っています。私はthisを見つけましたが、それは単一のフィールドのための良い解決策のように思えます。これは、フォームの各フィールドのゲッターとセッターでカスタムの計算属性を行う必要があることを意味しますか？私はデータバインディングがどのようにローカルストレージ（ほとんどの例で使用されているようです）でもうまく機能するか理解していますが、すべてのキーストロークでバックエンドサービスを更新することは過度のようです。

私がしたいのは、ユーザが（保存ボタンをクリックするなどの）アクションを実行したときにフォーム上で1回のコミットを実行することで、フィールドごとに計算されたプロパティまたはメソッドを作成するのが正しい方法ではない行く。

テンプレート：

<div v-show="isEditing" class="edit-view"> 
    <form> 
    <div class="form-group"> 
     <label>Title</label> 
     <input :value="item.title" type="text" class="form-control" @input="update" /> 
    </div> 
    <div class="form-group"> 
     <label>Description</label> 
     <input :value="item.description" type="text" class="form-control" @input="update" /> 
    </div> 
    </form> 
</div> 

JS：

export default { 
    name: 'todo', 
    props: ['item'], 
    data() { 
    return { 
     isEditing: false 
    } 
    }, 
    methods: { 
    showEdit() { 
     this.isEditing = true; 
    }, 
    update() { 
     // Commit a change to vuex store 
    } 
    } 

Answer 1

は、フォームのコンポーネントへのローカルフォームデータを保管してください。したがって、data()にすべてのフォームプロパティを定義します。すべての入力要素とそれに対応するデータプロパティにv-modelを適用します。ユーザーがサブミットをクリックすると、フォームデータで1回コミットします。

このようにして、フォームコンポーネントには編集された値が含まれ、vuexストアには送信された値が含まれます。