"vue": "2.4.2",
"vue-router": "2.7.0",
"vuex": "3.0.1"

<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>

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
      })
  }
})