Help us understand the problem. What is going on with this article?

【日本語変数名で学ぶ】 Vue.jsの状態の切り分け方

ここしばらくReactとTypeScriptでお仕事をしていたので、
Vue.jsの再学習という意味でメモを残していきます。

tl;dr

フォームの編集状態と送信するリクエストの状態に差分があるときは状態を1つにして、考慮するべき入力状態を1つに保つようにしよう。
https://codesandbox.io/s/form-itmqy

課題感

よく感じる課題感
サーバーから取得した状態を変更してサーバーへ送り返す際に、
日付のフォーマットが違うようなケースが稀によくある

例えば、以下のような状態があったとする。
1. 日付を入力するフォームがある
2. 送信ボタンを押すとAPIを叩いて日付を登録する

今回はこの2つの手順だけに絞ったフォームを作る

1. 日付を入力するフォームがある

イメージしてもらうにはこんな感じのをみてもらえばいいと思う。

input type="date" の 日付フォーマットは YYYY-MM-DD なので、
入力すると 例えば 1234-10-03 と表示されればOK。

<template>
  <div id="app">
    <h1>see App.vue</h1>
    <input type="date" :value="入力された日付" @input="入力された内容で日付を更新する">
    <p>{{入力された日付}}</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      入力された日付: ""
    };
  },
  methods: {
    入力された内容で日付を更新する(ev) {
      console.log(ev.target.value);
      this.入力された日付 = ev.target.value;
    }
  }
};
</script>

2. 送信ボタンを押すとAPIを叩いて日付を登録する

送信ボタンを押したときにリクエストを送る(ような)実装をしていく。
手順としては以下のような実装の順序になる
(1) 送信ボタン用のmethodを作る
(2) 送信ボタンのHTMLを書いて(1)で作ったmethodを@click にわたす
(3) 押されたときに実行したい処理を書く APIのIFに沿うように入力された日付をフォーマット
(4) フォーマットされた文字をリクエスト

<template>
  <div id="app">
    <input type="date" :value="入力された日付" @input="updateDate"> 
    <p>{{入力された日付}}</p>
    <!-- (2) 送信ボタンのHTMLを書いて(1)で作ったmethodを@click にわたす -->
    <button @click="postDate">send</button>
  </div>
</template>

<script>

// (3) 押されたときに実行したい処理を書く APIのIFに沿うように入力された日付をフォーマット
import moment from "moment";
const 日付をフォーマット = 渡した日付 => {
  const date = moment(渡した日付, "YYYY-MM-DD");
  return date.isValid() ? date.format("YYYY/MM/DD") : "";
};

const ajax = {
  post(data) {
    console.log("リクエスト内容は", data);
  }
};
export default {
  name: "App",
  data: function() {
    return {
      入力された日付: ""
    };
  },
  methods: {
    updateDate(ev) {
      console.log(ev.target.value);
      this.入力された日付 = ev.target.value;
    },
    postDate() { // (1) 送信ボタン用のmethodを作る
      // (4) フォーマットされた文字をリクエスト
      const フォーマットされた日付 = 日付をフォーマット(this.入力された日付);
      if (!フォーマットされた日付) {
        return;
      }

      ajax.post({
        date: フォーマットされた日付
      });
    }
  }
};
</script>

実際にフォームがさくっとできました。
今回書いたコードは こちらに上がっています => https://codesandbox.io/s/form-itmqy

まとめ

今回、Vue.jsの状態とサーバーへリクエストするときの状態が異なるフォーマットにしたときに複数の状態を保持するのではなく、
変更する状態は一つに、サーバーへリクエストするときに初めてフォーマットすると、
考慮するべき状態が少なく済むので複雑なロジックを組むときもシンプルに実装を保つことができます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした