vue.js 予定の追加

Question

vue.jsでスケジュール管理アプリを制作しています。
storeを用いて、store内のデータを表示しています。予定を追加する際はmutationでstoreに追加しようとしています。
タイトル、予定日、開始時間、終了時間といったような複数のデータをstoreに追加する際に、mutationの関数では複数の引数をとることができなかったため、それぞれ入力した際にv-on:keyup.enterでstore内の空のデータに一旦入力されたものを入れる関数を行い、最後に追加ボタンでstore内のそれぞれ一旦入れておいたデータをlistにpushして、空のデータに戻すという関数を行っています。（説明へたくそですみません。多分↓のコードを見ればわかると思います。）
しかし、最終的にbuttonやpickerで入力させたりしたときにわざわざエンターを押させるのは面倒なので、最終的に追加ボタンを押すだけでうまく予定をstoreに追加できるようなやりかたはないでしょうか？
アプリを作るのは初めての初心者なので、コードは汚いし、知識もあまりありませんが、よろしければ教えていただけると幸いです。

store/mutation.js

export const state = {
events: [
  {title:'aaa',
   date:'2018/2/10',
   start:'8時',
   finish:'17時',
  },
  {title:'bbb',
   date:'2018/2/15',
   start:'9時',
   finish:'16時',
  },
],

//一旦入れる入れ物
  newPlanCostomer:'',
  newPlanDate:'',
  newPlanStart:'',
  newPlanFinish:'',
};

export const mutations = {
  //一旦入れとくmethods
  addCostomer(state,payload){
    state.newPlanCostomer = payload;
  },

  addDate(state,payload){
    state.newPlanDate = payload;
  },

  addStart(state,payload){
    state.newPlanStart = payload;
  },

  addFinish(state,payload){
    state.newPlanFinish = payload;
  },

  addPlan(state){
    state.events.push({
      title: state.newPlanCostomer,
      date: state.newPlanDate,
      start: state.newPlanStart,
      finish: state.newPlanFinish,
    });
    state.newPlanCostomer='';
    state.newPlanDate='';
    state.newPlanStart='';
    state.newPlanFinish='';
  },

addPlan.vue

<div id="add">

    <p>施行日</p>
    <p><input type="text"
          v-model="newDate"
          v-on:keyup.enter="addDate(newDate)"></p>

    <p>開始時刻</p>
    <p><input type="text"
          v-model="newStart"
          v-on:keyup.enter="addStart(newStart)"></p>

    <p>終了予定時刻</p>
    <p><input type="text"
          v-model="newFinish"
          v-on:keyup.enter="addFinish(newFinish)"></p>

    <p>得意先</p>
    <p><input type="text"
           v-model="newCostomer"
           v-on:keyup.enter="addCostomer(newCostomer)"></p>


    <button v-on:click="addPlan()">
      追加
    </button>

  </div>

import Vue from 'vue'
import { mapState,mapMutations } from 'vuex'

  export default{
    name: 'add',

    data:function(){
      return{
        //v-modelの入れ物
        newCostomer:'',
        newDate:'',
        newStart:'',
        newFinish:'',
      }
    },

    computed:{
      ...mapState(['events','newPlanCostomer','newPlanDate','newPlanStart','newPlanFinish']), 
    },
    methods:{
      ...mapMutations(['addPlan','addCostomer','addDate','addStart','addFinish']),
    }
  }

Answer 1

Componentにメソッドを足して、入力状態を送信するとうまくできるかと思います。
動かなかったらすみません。
addDate等のフォームの変更に合わせたstoreへのあたいの代入は不要です。

...
addPlan(state, payload){
    state.events.push({
      title: payload.newPlanCostomer,
      date: payload.newPlanDate,
      start: payload.newPlanStart,
      finish: payload.newPlanFinish,
    });
  },
...

...
 <button v-on:click="add()">
      追加
 </button>
</div>

...
methods:{
    ...mapMutations(['addPlan']),
    add() {
        this.addPlan({
            newPlanCostomer: this.newCostomer,
            newPlanDate: this.newDate,
            newPlanStart: this.newStart,
            newPlanFinish: this.newFinish
        })
    }
  }
}

Comments

[syoyu]

回答ありがとうございました！
無事動きました。
なるほど、methodでv-modelを受け取れば良いのですね！勉強になりました。ありがとうございました。