【学習記録】アプリに写真削除機能を追加 - プログラミング勉強ノート

個人開発してる写真投稿アプリに写真削除機能を追加しました。
コミットは以下になります。

機能概要としては、ログインしているユーザーが投稿した写真に限り写真削除用のボタンを表示し、ボタンがクリックされたら写真削除用のAPIを呼び出す流れです。

f:id:JunpeiNakasone:20210302223811p:plain

とりあえず物理削除にしています。後々時間作ってDB設計を整理して削除フラグを使った論理削除の機能も足していきたいと思います。

あとaxiosでdeleteメソッドの引数がAPI側に渡せずしばらく苦戦してしまいました。

確か同じ問題を去年解決したような記憶があったので自分のブログを探してみるとこちらの記事が見つかりました。

記事の内容は、axiosでdeleteメソッドのリクエストを送る時はparamsというオブジェクトで渡す必要がある、という感じです。

ブログに書いといてよかったーと思ってparamsというオブジェクト名でAPIにリクエスト送ったところ、想定通りに引数が渡されませんでした。

上手くはいかなかったものの、何らかのオブジェクトに引数を入れることは多分必要だろうなという仮説を持ちながらググってみたところ下記の記事が見つかりました。

こちらによるとparamsではなくdataオブジェクトで渡すと良いとのこと。

記事を参考に以下のようにコードを修正しました。

api.delete('/deletePicture', {
        data: {
          picture_id: this.pictureData.picture_id
        }
      })

すると想定通りAPIに引数が渡されました。良かったです。記事に感謝。

自分が去年試したparamsオブジェクトで引数渡す方法も確か記事を書いてた時は成功していたと思うんですが、今動かないのが原因不明です。

その記事を書いてる時はNuxt.jsに使ってて今はVue CLIを使っているという違いも関係しているのかなと考えてます。(一応過去記事に「Vue CLIの場合はdataオブジェクトで動きました」と追記した)

手を動かしつつアウトプットしながらより理解を深めていきたいと思います。