State variable triggers error when displaying it in template as it's temporarily null when component mounts

Question

My user state variable is an object having several properties such as first_name. I want to display some of these properties in my component template.

I'm assign my state variable to a computed property which I use in template thus:

<template>
  <div>
    {{ user.first_name }}
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState({
      user: state => state.dashboard.user
    })
  },
  beforeMount () {
    this.$store.dispatch("dashboard/getUser");
  }
};
</script>

Although it works, I get the following error in console:

Error in render: "TypeError: Cannot read property 'title' of null"

I suppose it's because user is null for a split second as component mounts, till it receives info that Vue correctly displays in template. How to avoid the error though?

[EDIT] here are the relevant part of the store:

state: {
  user: null
},
...
actions: {
  async getUser({ commit }) {
    let user = await axios.get(`user`).catch(console.error);
    commit("SET_USER", user);
    return user;
  }
},

Answer 1

In your mapped getter you could default to an empty object like

state => state.dashboard.user || {}

That way things like user.first_name would be undefined rather than attempting to look for a property on the value null