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

Posted

技术标签:

【中文标题】如果在模板中使用变量获取错误未定义,则异步 vuex 获取操作状态已填充【英文标题】:async vuex fetch action state filled if using variable in template getting error undefined 【发布时间】: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,我认为问题不在这里 【参考方案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 引用。如果空字符串导致副作用(例如糟糕的用户体验),我也会有条件地渲染它。

以上是关于如果在模板中使用变量获取错误未定义,则异步 vuex 获取操作状态已填充的主要内容,如果未能解决你的问题,请参考以下文章

使用 Apollo + Vue 进行异步调用

VueJS:仅在计算内部未定义变量

挂载钩子中的错误(承诺/异步):“TypeError:无法读取未定义的属性'scrollIntoView'”在挂载钩子(Vue)中

vue-resource:在拦截 ajax 错误时捕获“未捕获(在承诺中)”

构建 Vue 项目时出现错误“无法安装组件:未定义模板或渲染函数”

在 vue 模板中从 axios 渲染值