如果在模板中使用变量获取错误未定义，则异步 vuex 获取操作状态已填充答案

【问题标题】：async vuex fetch action state filled if using variable in template getting error undefined如果在模板中使用变量获取错误未定义，则异步 vuex 获取操作状态已填充
【发布时间】：2019-02-15 09:45:20
【问题描述】：

我有一个异步操作 vuex，我使用 map getter 和组件创建的函数来获取和填充数据，如果我在模板视图控制台中使用此存储数据内联对象显示错误未定义，如果我尝试仅在没有内联对象的情况下访问变量 im内联对象出现未定义错误，我认为这个错误是关于异步函数没有阻塞主进程组件完全加载并且在异步函数填充变量之后

动作，状态

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

组件

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

状态已满

变量可以在html中看到

但是解决这个错误

【问题讨论】：

我看到你有 app/app 但网址是 api/app 我认为这会产生错误
app/app 表示在 app.js 和 state app 下，我可以填充 state，我认为问题不在这里

标签： vue.js vuejs2 async-await vue-component vuex

【解决方案1】：

app/app 最初是null，并且您的模板没有null 检查app.name，这会导致您看到的错误。你可以在模板中conditionally renderapp.name：

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

或者使用空字符串作为app/app 的初始状态，而不是您商店中的null。

【讨论】：

啊，是的，我将 null 状态变为空字符串并修复了错误 thnx
@SerkanDayicik 没问题 :)
@ton19 您认为哪个版本的最佳实践？空字符串状态还是模板条件渲染？
这可能取决于你如何使用它。我至少会将状态初始化为空字符串以避免潜在的null 引用。如果空字符串导致副作用（例如糟糕的用户体验），我也会有条件地渲染它。