Vueを使用してJavaScriptファイルからREST APIを呼び出す

Question

Vue ページで完全に動作する Axios API 呼び出しがあります。これを、アプリケーション内で何度も再利用できるスタンドアロンの呼び出し可能なモジュールに変換する必要があります。すべての試みは失敗します。それがスタンドアロン JS の経験不足なのか、それとも他の何かなのかはわかりません。

これは動作する Vue コードです。

<コード><テンプレート>
  <div>
    <ul v-if="posts&&posts.length">
      <li v-for="投稿の投稿">
        <p><strong>{{post.resID}}</strong></p>
        <p>{{post.Name}}</p>
      </li>
    </ul>

    <ul v-if="エラー&&errors.length">
      <li v-for=「エラーの中のエラー」>
        {{エラーメッセージ}}
      </li>
    </ul>
  </div>
</テンプレート>

<スクリプト>
「axios」から axios をインポートします。

デフォルトのエクスポート {
  名前: "GetMxList"、
  データ（） {
    戻る {
      投稿: []、
      エラー: []
    }
  }、

  // コンポーネントの作成時に投稿を取得します。
  作成した（） {
    axios.get("http://localhost:8080/rest/...")
    .then(応答 => {
      // JSON 応答は自動的に解析されます。
      this.posts = 応答.データ
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</スクリプト>
</code>

Vue 3.ご回答ありがとうございます。はっきりと表現できなくてごめんなさい。私の目標は、モジュール (rest.js に似たもの) を作成し、それを Pinia で使用することです。目標は、一度ロードして、その結果を頻繁に使用することです。現在、次のコードのような「静的」読み込みで動作します。getJSONList 呼び出しは JSON 形式の回答を返し、その回答をアプリケーション全体で使用できるように MyList に入れます。したがって、コンポーネントは単純に Pinia マッピングを使用します。

アクション: {

    非同期 fetchList() {
      
      const data = await getJSONList();
      this.Mylist = データ;
    },

何度も繰り返しました。これは何も返しませんが、少なくともエラーはスローされません...

import axios from 'axios';

エクスポート関数 getJSONList() {
    
    constrest = axios.create({
        baseURL: "http://localhost:8080/rest/", // より良いアプローチは環境変数を使用することです
      });

    const getPosts = async () => {
    試す {
      return (awaitrest.get("http://localhost:8080/rest/")).data;
    } キャッチ (エラー) {
      console.error(err.toJSON());
      新しいエラー(err.message)をスローします。
    }
  };
    リターン (getPosts);
}

Answer 1

通常、Axios 部分をモジュールに移動するだけで、データの使用はコンポーネントに任せます。

リーリー

その後、コンポーネント/ストレージなどで...

リーリー