vue でインターフェイスをどこに記述するかについて話しましょう

Vue は非常に人気のある JavaScript フレームワークで、その主な機能は単一ページの Web アプリケーションを構築することです。 Vue アプリケーションでは、多くの場合、インターフェイスを通じてデータを取得および更新する必要があります。では、Vue ではインターフェイスをどこに書けばよいのでしょうか?

一般的に、Vue プロジェクトでは、インターフェイスのリクエストをコンポーネントまたは Vuex ストアに入れます。具体的な選択は、アプリケーションの複雑さとニーズによって異なります。

コンポーネントにインターフェイスを記述する

Vue では、コンポーネントは、さまざまなデータと処理ロジックを含めることができる自己完結型のモジュールです。したがって、インターフェイス リクエストをコンポーネントに記述するのが一般的な方法です。この方法は、各コンポーネントが必要なデータを個別に要求できるため、小規模で比較的単純なアプリケーションに非常に適しています。

通常、コンポーネントの mounted メソッドでインターフェイスを呼び出します。このメソッドでは、コンポーネントが DOM にマウントされており、そのデータと計算されたプロパティが準備されています。これは、サーバーからデータを取得するのに最適な時期です。

たとえば、axios ライブラリを通じてサーバーにデータをリクエストする Vue コンポーネントを次に示します。

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      title: '我的任务列表',
      tasks: [],
    };
  },
  mounted() {
    axios.get('/api/tasks').then((response) => {
      this.tasks = response.data;
    });
  },
};
</script>

この例では、axios## を通じてサーバーにデータをリクエストします。 # library / api/tasks インターフェイスは GET リクエストを送信し、リクエストが成功すると、応答データがコンポーネントの tasks 属性に割り当てられます。 。この例では、インターフェイス要求はアプリケーション全体ではなく、コンポーネントのみを対象としていることに注意してください。

import axios from 'axios';

export default {
  actions: {
    fetchTasks({ commit }) {
      axios.get('/api/tasks').then((response) => {
        commit('SET_TASKS', response.data);
      });
    },
  },
  mutations: {
    SET_TASKS(state, tasks) {
      state.tasks = tasks;
    },
  },
  state: {
    tasks: [],
  },
};

fetchTasks。Axios ライブラリを通じて /api/tasks インターフェイスに GET リクエストを送信し、応答データを Vuex の tasks 状態に保存します。店。この操作は、commit メソッドを通じて SET_TASKS という名前のミューテーションを呼び出します。

以上がvue でインターフェイスをどこに記述するかについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。