在插件中使用vue-resource

时间:2018-01-02 13:49:57

标签: javascript plugins vue.js vue-resource

我正在尝试将所有的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);
            });

        }
    }
});

0 个答案:

没有答案