If you have nothing to do with two developers: "What is the correct posture for using AJAX in a Vue application?", you will get three or more different answers.
The official does not provide a specification for implementing AJAX, and there are many different design patterns that can be used effectively. Each has its own pros and cons and should be judged according to the requirements. You can even use several at the same time!
In this article, I'll show you four places where you can implement AJAX in your Vue application:
1. Root Example
2. Components
3、Vuex actions
4. Route Navigation Guard
5. Plus: Bonus Mode
I will explain each method, give an example, and cover the pros and cons.
1. Root Example
When using the Vue framework, you can make all AJAX requests from the root instance at the beginning, i.e. write all data requests and store all state in that instance. If any child component needs data, it will be passed down in the props. If the child component needs to refresh the data, a custom event will be used to prompt the root instance to request it.
new Vue({
data: {
message: ''
},
methods: {
refreshMessage(resource) {
this.$('/message').then((response) {
= ;
});
}
}
})
('sub-component', {
template: '<div>{{ message }}</div>',
props: [ 'message' ]
methods: {
refreshMessage() {
this.$emit('refreshMessage');
}
}
});
advantage
- Save all AJAX logic and data in one place.
- Keep your components “independent” so that they can focus more on presentation.
shortcoming
- As your app expands, there are a lot of "props" and custom events to be written.
2. Components
When using the Vue framework, components are responsible for managing their own AJAX requests and independent state. In fact, you may need to create several "container components" to manage the data for the local group "display components".
For example, filter-list might be a container component that wraps filter-input and filter-reset as display components. filter-list will contain AJAX data logic and will manage the data of all components in the group, communicating through props and events.
To simplify the implementation of this architecture, you can abstract any AJAX logic into a mix and then use mixin in the component to make it AJAX.
let mixin = {
methods: {
callAJAX(resource) {
//...
}
}
};
('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 {
//...
}
},
});
('presentation-comp', {
template: '<div>I just show stuff like {{ mydata }}</div>',
props: [ 'mydata' ]
});
advantage
- Keep components decoupled and reusable.
- Data can be obtained at any time and anywhere.
shortcoming
- No data is communicated with other components or component groups.
- Components may produce a lot of cumbersome responsibilities and repetitive functions.
3. Vuex actions
When using the Vue framework, you can manage state and AJAX logic in the Vuex store; components can request new data through dispatch method actions (which will be used to trigger actions).
If you are using this mode, it is better to return a promise from your action to react to parsing AJAX requests, such as hiding the load spinner, re-enable buttons, etc.
store = new ({
state: {
message: ''
},
mutations: {
updateMessage(state, payload) {
= payload
}
},
actions: {
refreshMessage(context) {
return new Promise((resolve) => {
this.$('...').then((response) => {
('updateMessage', );
resolve();
});
});
}
}
});
('my-component', {
template: '<div>{{ message }}</div>',
methods: {
refreshMessage() {
this.$('refeshMessage').then(() => {
// do stuff
});
}
},
computed: {
message: { return this.$; }
}
});
I prefer this data request pattern because it separates your state and performance logic well. If you are using Vuex, this is the way to go. If you don't use Vuex, this pattern may be a good reason.
advantage
- Advantages of all root component architectures, no props and custom events are required.
shortcoming
- Increase Vuex overhead.
4. Route Navigation Guard
When using the Vue framework, your application is divided into multiple pages and when the route changes, all the data required by the page and its subcomponents will be crawled.
The main advantage of this approach is that it really simplifies your UI. If the component gets its own data independently, the page will unpredictably re-render when the component data is filled in any order.
A neat way to achieve this is to create endpoints on your server for each page, such as /about, /contact that matches the route name in your application. You can then implement a common beforeRouteEnter hook that merges all data properties into the page component's data:
import axios from 'axios';
((to, from, next) => {
(`/api${}`).then(({ data }) => {
next(vm => (vm.$data, data))
});
})
advantage
- Make the UI more predictable.
shortcoming
- Overall, the page cannot be rendered until all data is ready.
- This mode doesn't help much if you don't use the route.
Bonus Mode: Render the server of the first AJAX call to the page
It is recommended to use AJAX when initial page loading to retrieve application status, as it requires additional round trips to the server, which will delay rendering of the application.
Instead, inject the initial application state into an inline script of the HTML page so that the application is available as a global variable when needed.
<html>
...
<head>
...
<script type="text/javascript">
window.__INITIAL_STATE__ = '{ "data": [ ... ] }';
</script>
</head>
<body>
<div ></div>
</body>
</html>
AJAX can then be more suitable for subsequent data extraction.
If you are interested in learning more about this architecture, please refer to the author's article "Avoid common anti-patterns in this full stack Vue/Laravel application”。
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.