Vuex 3: State is undefined - vue.js

Question

versions:
"vue": "2.4.2",
"vue-router": "2.7.0",
"vuex": "3.0.1"
I am attempting to mock a simple login with two fields that will in the end have JWT to allow an authenticated login.
However, the state in Vuex refuses to change and will output that it is "undefined"
Starting from Login.vue:
<template>
<div class="login" id="login">
<b-form-input
id="inputfield"
v-model="username"
type="text"
placeholder="username">
</b-form-input>
<b-form-input
id="inputfield"
type="password"
v-model="password"
placeholder="password">
</b-form-input>
<b-button #click="login()" id = "inputfield" variant="outline-success">
Login
</b-button>
</div>
</template>
<script>
export default {
name: 'login',
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
this.$store.dispatch('login', {
username: this.username,
password: this.password,
isAuthed: true // this is a temp test to see if it changes
})
}
}
}
</script>
The store is as such:
export default new Vuex.Store({
state: {
username: null,
loggedIn: false
},
mutations: {
authUser (state, userData) {
console.log(userData.isAuthed) // True!
state.username = userData.username
state.loggedIn = userData.isAuthed
console.log(state.loggedIn) // Undefined?
console.log(state.username) // Also undefined?
}
},
actions: {
login ({commit}, authData) {
console.log(authData)
commit('authUser', {
authData
})
}
})
In another words, I can follow the isAuthed and username around the flow and they're always present, everything goes wrong when trying to assign a new value to the state. Am I doing it wrong? This is following a guide, however vuex is version 3 here, did they change the way you mutate the state?

Answer 1

The error is here in your login action.
commit('authUser', {
authData
})
That should just be
commit('authUser', authData)
In the original statement you are creating a new object with an authData property. What you want to do is simply pass the authData object to the mutation.
Here is a demonstration of it working.