async vuex fetch action state filled if using variable in template getting error undefined

Question

i have one async action vuex, im using map getters and component created function to fetch and fill data, if im using this store data inline object in template view console show error undefined, if i try acces variable only without inline object im getting undefined error for inline object, i think this error about async function not blocking main process component fully loaded and after async function filled variable

actions, state

 // state
   export const state = {
    app: null
   }

   // getters
   export const getters = {
    app: state => state.app,
   }

   // mutations
   export const mutations = {
   [types.FETCH_APP_SUCCESS] (state, { app }) {
     state.app = app
   },

   [types.FETCH_APP_FAILURE] (state) {
    state.app = null
   },

   [types.UPDATE_APP] (state, { app }) {
     state.app = app
   }
   }
 async fetchApp ({ commit }) {
 try {
  const { data } = await axios.get('/api/app/1')
  commit(types.FETCH_APP_SUCCESS, { app: data })
 } catch (e) {
  commit(types.FETCH_APP_FAILURE)
 }
}

component

<template>
 <div>
   {{app.name}}
 </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  middleware: 'auth',

created () {
  // i try here async and await
 this.$store.dispatch('app/fetchApp')
},

computed: mapGetters({
 app: 'app/app'
}),

metaInfo () {
 return { title: this.$t('home') }
}
}
</script>

state is filled

variable can see in html

but console this error

Answer 1

app/app is initially null, and your template does not have a null check on app.name, which results in the error you saw. You can either conditionally render app.name in the template:

<template>
  <div>
    <template v-if="app">
      {{app.name}}
    </template>
  </div>
</template>

Or use the empty string as app/app's initial state instead of null in your store.