I've got strange problem with accessing object from vuex store in nuxt.js

After login I keep user in object user in vuex store:

export const state = () => ({
  current_user: {}
})

export const mutations = {
  signIn(state, user_payload) {
    state.current_user = user_payload.user
  }
}

And when I try to access store.state.current_user.token after signIn method, store.state.current_user.token is undefined (in browser while debugging I see that it is set correctly).

Then in plugin:

export default function ({ $axios, redirect, app: { store, router } }) {
  $axios.setHeader('Access-Control-Allow-Origin', '*');
  $axios.onRequest(config => {
    console.log(store.state.current_user.token); // always undefined
  });
}

What's really weird, that modification works:

export const state = () => ({
  current_user: {},
  token: ''
})

export const mutations = {
  signIn(state, user_payload) {
    state.current_user = user_payload.user
    state.token = state.current_user.token
  }
}

export default function ({ $axios, redirect, app: { store, router } }) {
  $axios.setHeader('Access-Control-Allow-Origin', '*');
  $axios.onRequest(config => {
    console.log(store.state.token); // it's valid after signIn
  });
}

So I can access string from store, but I can't access object. Any ideas why?

0 Answers