如果询问两位vuejs开发者,应用中使用ajax请求的最好方式是什么?,你会得到三种不同的意见。
Vue没有提供官方方式发送ajax,其实有很多用起来很有效的设计模式。每个都有优缺点,需要根据需求场景
判断使用。你甚至可以同时使用其中几个模式。
本文将会介绍Vue应用中可以发送ajax请求的四个位置:
根实例
组件
借助 Vuex Actions
路由导航拦截
我会解释每一种方法,给出具体实例,也会分析具体优缺点。
根实例
采用根实例,你可以在实例内发送所有ajax请求,也可以存储所有状态。
如果子组件需要数据,直接通过props传递。
如果子组件需要更新过的数据,可以通过自定义事件触发根实例,发送请求更新数据。
new Vue({
data: {
message: ''
},
methods: {
refreshMessage(resource) {
this.$http.get('/message').then((response) {
this.message = response.data.message;
});
}
}
})
Vue.component('sub-component', {
template: '
props: [ 'message' ]
methods: {
refreshMessage() {
this.$emit('refreshMessage');
}
}
});
优点:
將所有ajax请求逻辑维护在一处
组件专注于展示逻辑
缺点:
随着应用不断扩大,需要不断新增props和自定义事件
组件
组件负责独立管理自己ajax请求和状态。
具体项目中,你可能会创建多个容器组件来管理其内部多组展示组件数据。
例如,filter-list可能是容器组件,包含filter-input和filter-reset展示组件。
filter-list内包含自身ajax逻辑,通过props和自定义事件来管理子组件的数据。
可以参考Dan Abramov的文章展示组件和容器组件中关于此模式的具体描述
你可以通过ajax逻辑抽象成mixin,轻松实现这种模式,然后在组件中引入mixin,启用ajax逻辑。
let mixin = {
methods: {
callAJAX(resource) {
...
}
}
}
Vue.component('container-comp', {
// No meaningful template, I just manage data for my children
template: '
mixins: [ myMixin ],
data() {
return { ... }
},
})
Vue.component('presentation-comp', {
template:
props: [ 'mydata' ]
})
优点:
保持组件解耦且可重用;
按需获取数据;
缺点:
和其他组件或分组组件之间通信会变得复杂;
组件最后会承担过多职责,增加重复功能;
借助 Vuex Actions
通过此模式,你可以在Vuex Store中同时维护状态和ajax逻辑。
组件可以通过分发action请求新数据。
如果你采用本模式,最好在action内部返回promise以便根据请求结果做出处理,
例如, 隐藏进度条、启用某个按钮等等。
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: '
methods: {
refreshMessage() {
this.$store.dispatch('refeshMessage').then(() => {
// do stuff
});
}
},
computed: {
message: { return this.$store.state.message; }
}
});
我很喜欢这种模式,因为很好地解耦组件状态和展示逻辑。如果你用vuex, 可以用这种模式。
如果你没用vuex, 这会成为使用框架的充足原因。
优点:
优点和根实例一样,但是不需要props和自定义事件;
缺点:
需要额外引入vuex;
路由导航拦截
应用通过本模式分割程多个页面,路由变化时,页面和子组件需要的数据都会重新拉取。
该方法的主要优势在于真正简化界面展示。如果组件各自独立获取数据,随着组件数据任意生成,
整个页面会毫无征兆地重新渲染。简洁实现是在服务端针对每个页面创建终点,例如,/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获取数据,因为需要额外访问服务端,延迟应用渲染。
替代实现是将应用初始状态数据通过内联脚本注入HTML页面的头部,作为全局变量,只要应用需要,都可以直接获取。
...
...
window.__INITIAL_STATE__ = '{ "data": [ ... ] }';
译者注