ホームページ >ウェブフロントエンド >Vue.js >Vue アプリケーションに AJAX を実装する 4 つの場所
Vue アプリケーションに AJAX を実装する 4 つの場所
- PHPz転載
- 2020-09-25 16:07:032462ブラウズ
Vue には、AJAX を実装するための正式な方法が用意されておらず、効果的に使用できるさまざまな設計パターンが多数あります。各方法には長所と短所があるため、ニーズに基づいて判断する必要があります。同時に複数を使用することもできます。
この記事では、Vue アプリケーションに AJAX を実装する 4 つの場所を示します:
ルート インスタンス
コンポーネント
Vuex アクション
ルート ナビゲーション ガード
それぞれの方法を説明し、例を挙げ、その長所と短所について説明します。
1. ルート インスタンス
このアーキテクチャでは、すべての AJAX リクエストをルート インスタンスから行うことができ、すべての状態をルート インスタンスに保存します。子コンポーネントがデータを必要とする場合、ヘルパーとして機能します。子コンポーネントがデータを更新する必要がある場合、ルート インスタンスはカスタム イベントを使用してそれを要求するように求められます。
#例:
new Vue({
data: {
message: ''
},
methods: {
refreshMessage(resource) {
this.$http.get('/message').then((response) {
this.message = response.data.message;
});
}
}
})
Vue.component('sub-component', {
template: '<div>{{ message }}</div>',
props: [ 'message' ]
methods: {
refreshMessage() {
this.$emit('refreshMessage');
}
}
});
利点:
- すべての AJAX ロジックとデータを 1 か所に保管します。
- コンポーネントがプレゼンテーションに集中できるように、コンポーネントを「愚か」なままにしておきます。
欠点:
- アプリケーションが拡張するにつれて、多数の props とカスタム イベントが必要になります。
2. コンポーネント
このアーキテクチャを使用すると、コンポーネントは独立して管理されます 独自の AJAXリクエストとステータス。実際には、独自のローカル「プレゼンテーション」コンポーネント グループのデータを管理する複数の「コンテナ」コンポーネントを作成することができます。
#たとえば、filter-list は、filter-input と filter-reset をラップするコンテナ コンポーネントである可能性があります。これらは、次のように機能します。プレゼンテーションコンポーネント。 filter-list には AJAX ロジックが含まれ、グループ内のすべてのコンポーネントのデータを管理し、props とイベントを介して通信します。
#このアーキテクチャの実装を容易にするために、AJAX ロジックをミックスインに抽象化し、コンポーネント内でそのミックスインを使用して AJAX にすることができます。有効になりました。 let mixin = {
methods: {
callAJAX(resource) {
...
}
}
}
Vue.component('container-comp', {
// No meaningful template, I just manage data for my children
template: '<div><presentation-comp :mydata="mydata"></presentation-comp></div>',
mixins: [ myMixin ],
data() {
return { ... }
},
})
Vue.component('presentation-comp', {
template: <div>I just show stuff like {{ mydata }}</div>,
props: [ 'mydata' ]
})
- コンポーネントを維持する分離して再利用可能。
- 必要なデータをいつ、どこで入手するか。
- 他のコンポーネントまたはコンポーネント グループとデータを通信するのは簡単ではありません。
3. Vuex アクション
このアーキテクチャを使用すると、状態ロジックを管理し、ストレージ内の AJAX ロジック。コンポーネントはディスパッチ操作を通じて新しいデータを要求できます。
このパターンを実装する場合は、解析して応答できるように、操作で Promise を返すことが最善です。読み込みスピナーの非表示、ボタンの再有効化など、AJAX リクエストに対応します。 store = new Vuex.Store({
state: {
message: ''
},
mutations: {
updateMessage(state, payload) {
state.message = payload
}
},
actions: {
refreshMessage(context) {
return new Promise((resolve) => {
this.$http.get('...').then((response) => {
context.commit('updateMessage', response.data.message);
resolve();
});
});
}
}
});
Vue.component('my-component', {
template: '<div>{{ message }}</div>',
methods: {
refreshMessage() {
this.$store.dispatch('refeshMessage').then(() => {
// do stuff
});
}
},
computed: {
message: { return this.$store.state.message; }
}
});このアーキテクチャが気に入っているのは、状態とプレゼンテーションのロジックが非常にうまく分離されているためです。 Vuex を使用している場合は、次の 1 つの方法があります。 Vuex を使用しない場合、これはおそらく十分な理由になります。
- すべてのルート コンポーネント アーキテクチャ利点は、小道具やカスタム イベントが必要ないことです。
- #欠点:
このアーキテクチャでは、アプリケーションは複数のページに分割され、ルートが変更されると、必要なすべてのデータが取得されます。ページとそのサブコンポーネントの場合。
このアプローチの主な利点は、UI が非常に簡素化されることです。コンポーネントが独自のデータを独立して取得する場合、コンポーネント データが任意の順序で入力されるとページが予期せず再レンダリングされます。
实现此功能的一个简单方法是在服务器上为每个页面创建端点，例如/about、/contact等，这些端点与应用程序中的路由名匹配。然后，可以实现一个通用的beforeRouteEnter钩子，将所有数据属性合并到页面组件的数据中:
import axios from 'axios';
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__ = '{ "data": [ ... ] }';
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>然后，AJAX可以更恰当地用于后续数据获取。
相关推荐：
更多编程相关知识，请访问：编程入门！！
以上がVue アプリケーションに AJAX を実装する 4 つの場所の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。