0

I'm using axios to post two requests to update a user profile in my app:

    methods: {
        updateProfileInfo () {
            let token = this.getAuthToken
            return axios.patch(`/api/profiles/${this.userid}/`, {
                bio: this.bio,
                dob: this.dob,
                media_url: this.media_url
            }, {
                headers: {
                    'Authorization': 'Token ' + token
                }
            })
        },
        updateUserInfo () {
            let token = this.getAuthToken
            return axios.patch(`/rest-auth/user/`, {
                username: this.username,
                first_name: this.firstname,
                last_name: this.lastname
            }, {
                headers: {
                    'Authorization': 'Token ' + token
                }
            })
        },
        updateProfile () {
            axios.all([this.updateProfileInfo(), this.updateUserInfo()])
                .then(axios.spread(function (resProfile, resUser) {
                    this.$store.commit('SET_USERNAME', this.username)
                    console.log('spread...')
                    console.log(resProfile)
                    console.log(resUser)
                })).catch(err => {
                    console.log(err)
            })
        }

This is generating the following error (trying to commit username inside updateProfile):

TypeError: Cannot read property '$store' of null
at eval (Profile.vue?bbca:206)
at wrap (spread.js?3c41:25)
at <anonymous>

Here are my mutations in the Vuex store:

mutations: {
    SET_TOKEN_AUTH(state, key) {
        state.token = key
    },
    SET_USERID(state, id) {
        state.userid = id
    },
    SET_USERNAME(state, username) {
        state.username = username
    },
    USER_LOGOUT(state) {
        state.token = null
        state.userid = null
        state.username = null
    }
},
Evan Zamir
  • 8,059
  • 14
  • 56
  • 83
  • Argh, one of my biggest issues... the scope for `this` has probably changed. Try changing your `function (resProfile, resUser) {` to `(resProfile, resUser) => {`. –  Aug 01 '17 at 17:04
  • @Thebluefish Whoa, that worked. Thanks! Now I'll just have to figure out why. haha – Evan Zamir Aug 01 '17 at 17:07
  • @Bert Thanks, I left a comment there. I'm confused how in one example using an arrow function is ok, but in another example it is not. – Evan Zamir Aug 01 '17 at 18:05
  • There are times when you *want* to use an arrow function, as with a callback to an ajax call (in your case using axios) and when you *don't* want to in Vue which is primarily when defining a *method* (or a lifecycle handler like `created`). Arrow functions capture *this* in the scope in which they are defined, which is a *good* thing for callbacks and a *bad* thing for method definitions. In the case of a callback *this* will be the Vue, and when used for methods *this* will be the containing scope (which is often `window`). I understand it can be confusing :) – Bert Aug 01 '17 at 18:11
  • @Bert I tried this example (no pun intended) using `self` and it works and seems a little more explicit, which I like. https://gist.github.com/EvanZ/343743b928981e40365be3b10705f7d8 – Evan Zamir Aug 01 '17 at 18:16
  • Using a closure to capture the correct `this` is also a perfectly acceptable way to do this. See the answer I linked this as a duplicate. It goes into a lot more detail. – Bert Aug 01 '17 at 18:17

0 Answers0