我正在尝试将所有的vue-resource请求放入一个单独的组件/插件中,以便于重复使用而且没有重复,但是对于Vue是新手,我不确定这是否是正确的方法。 这看起来有点笨拙。
我希望能够在我的插件中定义所有资源,并能够初始化新会话并全局设置Auth标头。以下工作,但我相信有更好/更清洁的方式。
非常感谢有关更好方法的任何指导/建议。 感谢
插件 - DataService.js
创建一个Init函数来设置全局Auth标头,然后创建一些其他属性来存储路径和选项。
const DataService = {
init : function(newsession) {
this.session = newsession;
Vue.http.headers.common['Authorization'] = newsession;
},
userpath : '/api/users/',
options: {emulateJSON: true},
};
DataService.install = function (Vue, options) {
Vue.prototype.$getUser = function (userid) {
return this.$http.get(DataService.userpath + userid);
}
Vue.prototype.$saveUser = function (user) {
return this.$http.post(DataService.userpath + user.id,{data: user},DataService.options);
}
}
Vue Instance - account.js
注意:我首先初始化我的DataService以传递新会话,并将其称为插件(.use)。
DataService.init(session_id);
Vue.use(DataService);
new Vue({
el: '#app',
data: {
user: { id: null, username: null},
session: { },
processing: false,
alert: "",
warning: "",
},
computed: {
},
mounted: function() {
this.loadUser();
},
methods: {
loadUser: function () {
this.$getUser(userid).then(function(response) {
// get body data
var res = response.body;
this.user = res.data;
this.session = res.session;
}, function(response) {
console.error('Error loading user',response);
});
},
saveUser: function () {
this.$saveUser(this.user).then( function(response) {
// success callback
console.log('Saved user',response);
}, function(response){
// error callback
console.error('Error Saving user',response);
});
}
}
});