Vue 애플리케이션에서 AJAX를 구현하는 4가지 장소
- PHPz앞으로
- 2020-09-25 16:07:032452검색
Vue는 AJAX를 구현하는 공식적인 방법을 제공하지 않으며 효과적으로 사용할 수 있는 다양한 디자인 패턴이 있습니다. 각 방법에는 장단점이 있으므로 필요에 따라 판단해야 합니다. 동시에 여러 개를 사용할 수도 있습니다!
이 기사에서는 Vue 애플리케이션에서 AJAX를 구현하는 네 가지 위치를 보여 드리겠습니다.
Root Instance
Component
Vuex Action
-
경로 탐색 가드
각 방법을 설명하고 예를 들어 장단점을 논의하겠습니다.
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 로직과 데이터를 한 곳에 보관하세요.
구성 요소를 "멍청하게" 유지하여 프레젠테이션에 집중할 수 있도록 하세요.
단점:
애플리케이션이 확장됨에 따라 많은 소품과 맞춤 이벤트가 필요합니다.
2. 구성 요소
이 아키텍처를 사용하면 구성 요소가 자체 AJAX 요청 및 상태를 독립적으로 관리할 책임이 있습니다. 실제로는 자체 로컬 "프레젠테이션" 구성 요소 그룹에 대한 데이터를 관리하는 여러 "컨테이너" 구성 요소를 만들고 싶을 수도 있습니다.
예를 들어, filter-list는 프레젠테이션 구성 요소 역할을 하는 filter-input 및 filter-reset을 래핑하는 컨테이너 구성 요소일 수 있습니다. 필터 목록에는 AJAX 로직이 포함되며 소품과 이벤트를 통해 통신하면서 그룹의 모든 구성 요소에 대한 데이터를 관리합니다.
이 아키텍처를 더 쉽게 구현하려면 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 실행
이 아키텍처를 사용하면 Vuex 저장소에서 상태 저장 논리와 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를 사용하는 경우 다음 방법 중 하나를 사용하세요. Vuex를 사용하지 않는다면 아마도 이것이 충분한 이유일 것입니다.
장점:
소품 및 사용자 정의 이벤트가 필요 없이 루트 구성 요소 아키텍처의 모든 장점을 누릴 수 있습니다.
단점:
Vuex 오버헤드 증가
4. 경로 탐색 가드
이 아키텍처를 사용하면 애플리케이션이 여러 페이지로 분할됩니다. 경로가 변경되면, 페이지와 해당 하위 구성 요소에 필요한 모든 데이터를 가져옵니다.
이 접근 방식의 가장 큰 장점은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!