4 种 Vuejs 应用ajax请求发送模式
如果询问两位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: '<div>{{ message }}</div>',
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: '<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' ]
})
优点:
保持组件解耦且可重用；
按需获取数据；
缺点：
和其他组件或分组组件之间通信会变得复杂；
组件最后会承担过多职责，增加重复功能；
借助 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: '<div>{{ message }}</div>',
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页面的头部，作为全局变量，只要应用需要，都可以直接获取。
<html>
...
<head>
...
<script type="text/javascript">
window.__INITIAL_STATE__ = '{ "data": [ ... ] }';
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
