state.user is null when using Vuex getter

Question

The token value is well confirmed and mutation is well confirmed, but only the user does not enter the value

mutation is auth_success console.log(user.id) && console.log(user.name)

I implemented it properly but I don't know why it doesn't work

state: { // state는 변수를 의미
    drawer: false,
    sb: {
      act: false,
      msg: '',
      color: 'error'
    },
    status: '',
    token: localStorage.getItem('token') || '',
    user : {}
  }

 mutations: { // mutations는 변수를 조작하는 함수를 의미
    pop (state, d) {
      state.sb.msg = d.msg
      state.sb.color = d.color
      state.sb.act = false
      if (d.act === undefined) state.sb.act = true
    },

    auth_request(state){
      state.status = 'loading'
    },
    auth_success(state, token, user){
      state.status = 'success'
      state.token = token
      state.user = user
    },
    auth_error(state){
      state.status = 'error'
    },
    logout(state){
      state.status = ''
      state.token = ''
    },
    validate_event(state){
      state.status = 'expired'
    }
  },

actions: {
    login({commit}, user){
      return new Promise((resolve, reject) => {
        commit('auth_request')
        axios({url: '/users/login', data: user, method: 'POST' })
        .then(resp => {
          const token = resp.data.token
          const user = resp.data.user
          console.log(user.id)
          console.log(user.name)
          localStorage.setItem('token', token)
          axios.defaults.headers.common['Authorization'] = token
          commit('auth_success', token, user)
          resolve(resp)
        })
        .catch(err => {
          commit('auth_error')
          localStorage.removeItem('token')
          reject(err)
        })
      })
    },

score 2 · Answer 1 · answered Jul 16 '20 at 14:56

Mutations accept only two parameters: first - state, second - payload. If you want to pass multiple parameters in payload use an object.

commit('auth_success', { token, user })

The in mutations:

auth_success(state, payload){
      const { token, user } = payload
      state.status = 'success'
      state.token = token
      state.user = user
    },

score 1 · Answer 2 · answered Jul 16 '20 at 14:57

Mutations expect two arguments: state and payload, where the current state of the store is passed by Vuex itself as the first argument and the second argument holds any parameters you need to pass.

You need to destructure the auth_success mutations parameters:

auth_success(state, { token, user }){
      state.status = 'success'
      state.token = token
      state.user = user
},

Quote reference: Vuex - passing multiple parameters to mutation

state.user is null when using Vuex getter

2 Answers2