Vue アプリケーションに AJAX を実装する 4 つの場所-Vue.js-php.cn

Vue アプリケーションに AJAX を実装する 4 つの場所

PHPz

リリース： 2020-09-27 11:35:28

転載

2408 人が閲覧しました

Vue アプリケーションに AJAX を実装する 4 つの場所

Vue には、AJAX を実装するための正式な方法が用意されておらず、効果的に使用できるさまざまな設計パターンが多数あります。各方法には長所と短所があるため、ニーズに基づいて判断する必要があります。同時に複数を使用することもできます。

この記事では、Vue アプリケーションに AJAX を実装する 4 つの場所を示します:

ルートインスタンス
コンポーネント
Vuex アクション
ルートナビゲーションガード

それぞれの方法を説明し、例を挙げ、その長所と短所について説明します。

1. ルートインスタンス

このアーキテクチャでは、すべての AJAX リクエストをルートインスタンスから行うことができ、すべての状態をルートインスタンスに保存します。子コンポーネントがデータを必要とする場合、ヘルパーとして機能します。子コンポーネントがデータを更新する必要がある場合、ルートインスタンスはカスタムイベントを使用してそれを要求するように求められます。

#例:

new Vue({
  data: {
    message: &#39;&#39;
  },
  methods: {
    refreshMessage(resource) {
      this.$http.get(&#39;/message&#39;).then((response) {
        this.message = response.data.message;
      });
    }
  }
})

Vue.component(&#39;sub-component&#39;, {
  template: &#39;<div>{{ message }}</div>&#39;,
  props: [ &#39;message&#39; ]
  methods: {
    refreshMessage() {
      this.$emit(&#39;refreshMessage&#39;);
    }
  }
});

ログイン後にコピー

利点:

すべての AJAX ロジックとデータを 1 か所に保管します。
コンポーネントがプレゼンテーションに集中できるように、コンポーネントを「愚か」なままにしておきます。

欠点:

アプリケーションが拡張するにつれて、多数の props とカスタムイベントが必要になります。

2. コンポーネント

このアーキテクチャを使用すると、コンポーネントは独立して管理されます独自の AJAXリクエストとステータス。実際には、独自のローカル「プレゼンテーション」コンポーネントグループのデータを管理する複数の「コンテナ」コンポーネントを作成することができます。

#たとえば、filter-list は、filter-input と filter-reset をラップするコンテナコンポーネントである可能性があります。これらは、次のように機能します。プレゼンテーションコンポーネント。 filter-list には AJAX ロジックが含まれ、グループ内のすべてのコンポーネントのデータを管理し、props とイベントを介して通信します。

#このアーキテクチャの実装を容易にするために、AJAX ロジックをミックスインに抽象化し、コンポーネント内でそのミックスインを使用して AJAX にすることができます。有効になりました。

let mixin = {
  methods: {
    callAJAX(resource) {
      ...
    }
  }
}

Vue.component(&#39;container-comp&#39;, {
  // No meaningful template, I just manage data for my children
  template: &#39;<div><presentation-comp :mydata="mydata"></presentation-comp></div>&#39;, 
  mixins: [ myMixin ],
  data() {
    return { ... }
  },

})

Vue.component(&#39;presentation-comp&#39;, {
  template: <div>I just show stuff like {{ mydata }}</div>,
  props: [ &#39;mydata&#39; ]
})

ログイン後にコピー

利点:

欠点:

3. Vuex アクション

このアーキテクチャを使用すると、状態ロジックを管理し、ストレージ内の AJAX ロジック。コンポーネントはディスパッチ操作を通じて新しいデータを要求できます。

このパターンを実装する場合は、解析して応答できるように、操作で Promise を返すことが最善です。読み込みスピナーの非表示、ボタンの再有効化など、AJAX リクエストに対応します。

store = new Vuex.Store({
  state: {
    message: &#39;&#39;
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload
    }
  },
  actions: {
    refreshMessage(context) {
      return new Promise((resolve) => {
        this.$http.get(&#39;...&#39;).then((response) => {
          context.commit(&#39;updateMessage&#39;, response.data.message);
          resolve();
        });
      });
    }
  }
});

Vue.component(&#39;my-component&#39;, {
  template: &#39;<div>{{ message }}</div>&#39;,
  methods: {
    refreshMessage() {
      this.$store.dispatch(&#39;refeshMessage&#39;).then(() => {
        // do stuff
      });
    }
  },
  computed: {
    message: { return this.$store.state.message; }
  }
});

ログイン後にコピー

このアーキテクチャが気に入っているのは、状態とプレゼンテーションのロジックが非常にうまく分離されているためです。 Vuex を使用している場合は、次の 1 つの方法があります。 Vuex を使用しない場合、これはおそらく十分な理由になります。

利点:

Vuex オーバーヘッドの増加

##4. ルートナビゲーションガード

このアーキテクチャでは、アプリケーションは複数のページに分割され、ルートが変更されると、必要なすべてのデータが取得されます。ページとそのサブコンポーネントの場合。

このアプローチの主な利点は、UI が非常に簡素化されることです。コンポーネントが独自のデータを独立して取得する場合、コンポーネントデータが任意の順序で入力されるとページが予期せず再レンダリングされます。

实现此功能的一个简单方法是在服务器上为每个页面创建端点，例如/about、/contact等，这些端点与应用程序中的路由名匹配。然后，可以实现一个通用的beforeRouteEnter钩子，将所有数据属性合并到页面组件的数据中:

import axios from &#39;axios&#39;;

router.beforeRouteEnter((to, from, next) => {
  axios.get(`/api${to.path}`).then(({ data }) => {
    next(vm => Object.assign(vm.$data, data))
  });
})

ログイン後にコピー

优点：

使UI更加可预测。

缺点：

整体上比较慢，因为页面在所有数据都准备好之前无法呈现。
如果您不使用路由，也没有多大帮助。

附加模式:服务器—在页面中呈现第一个AJAX调用

不建议在初始页面加载时使用AJAX检索应用程序状态，因为它需要额外的到服务器的往返，这会延迟应用程序的呈现。

相反，将初始应用程序状态注入HTML页面头部的内联脚本中，以便在需要时将其作为全局变量提供给应用程序。

<html>
...
<head>
  ...
  <script type="text/javascript">
   window.__INITIAL_STATE__ = &#39;{ "data": [ ... ] }&#39;;
  </script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

ログイン後にコピー

然后，AJAX可以更恰当地用于后续数据获取。