【Vue】APIレスポンスがエラーのとき、エラー内容をフラッシュメッセージで表示させる方法が分かりません

前提・実現したいこと

storeに定義したaxiosで楽天APIを叩いていて、エラーがレスポンスが返ってきた時、
そのエラー内容をフラッシュメッセージで表示させてたいのですが、
その考え方が分からないので、アドバイスいただけないでしょうか。

consoleにはエラー内容が表示されるところまではできました。

イメージしているのは、返ってきたエラー内容を、error.vueなどのコンポーネントに受け渡してあげるようなもので合っていますでしょうか？

よろしくお願いいたします。

該当のソースコード

「あ」と一文字で検索すると、エラーが返ってきます。楽天APIで、二文字以上で検索するよう、定められているからです。

error_description: "keyword is not valid"の部分を、「二文字以上のキーワードで検索してください」といったフラッシュメッセージを表示させたいです。

store.js

Vue
1function searchItem(keyword) {
2  return axios.get(
3    "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706",
4    {
5      params: {
6        applicationId: XXXXXXXXXXXXXXXXXXXXX,
7        keyword: keyword,
8      },
9    }
10  );
11}
12
13  search({ commit, state }) {
14    searchItem(
15      state.keyword,
16    )
17      .then((res) => {
18        commit("search", res.data);
19      })
20      .catch((error) => {
21        console.log(error.response.data);
22      });
23  },

試したこと

ググっても、フォームのバリデーションの記事ばかりで、望んでいる実装の情報が見つけられませんでした。

補足情報（FW/ツールのバージョンなど）

vue 2.6.12
webpacker（vue CLIではありません）

行動規範の内容に同意します

回答1件

ベストアンサー

ご質問拝見いたしました。

storeにerror等と用意して、エラーメッセージを表示したい画面で保持したerrorを表示するのはいかがでしょうか？

また、error内容が決まっているのであれば、文字列を比較して表示したいメッセージをstoreに用意したerrorに保持してあげれば良いと思いました。

安易な考えですが、以下のイメージです。

Vue
1search({ commit, state }) {
2    searchItem(
3      state.keyword,
4    )
5      .then((res) => {
6        commit("search", res.data);
7      })
8      .catch((error) => {
9        if (error.respose.data.error_description === "keyword is not valid") {
10          this.error = "二文字以上のキーワードで検索してください"; // storeに保持しているerrorに代入
11        }
12      });
13  }