まず GIPHY の API key を取得する

以下の動画を参照して、GIPHY の API key を取得してください。

前章の最後のコードから開発を始める

このコードから開発をはじめます

データ取得

ここまで完成したコード

  • GIPHY API への問い合わせのための URL を API Key 情報、検索ワード、検索制限数等の値を組み合わせて生成する
  • axios でデータを取得する
  • 取得したデータから、image 用の url だけを map を使ってうまく取り出す
  • これを vuex store の state の results にセットする
/store/search/index.js
const actions = {
  async doSearch({ commit }, keyword) {
    const key = "V6AU97qCSCYVmbIC5UDppEiVM1xnuO9E";
    const limit = 3;
    const url = `https://api.giphy.com/v1/gifs/search?q=${keyword}&api_key=${key}&limit=${limit}`;

    commit("setLoading", true);
    const results = await axios.get(url);
    const data = results.data.data;
    const imageUrls = data.map(o => o.images.downsized.url);
    console.log(imageUrls);
    commit("setLoading", false);
    commit("setResults", imageUrls);
  }
};