如何处理来自存储在vue中的空数据答案

【问题标题】：How to handle null data from store in vue如何处理来自存储在vue中的空数据
【发布时间】：2019-02-18 19:40:07
【问题描述】：

目前，如果其中一个数据为空，我会收到错误消息。数据从 vuex 存储中获取。如何消除错误？

data (){
    return{
      projects: this.$store.state.authUser.roles
    }
  },

【问题讨论】：

究竟是什么错误？你确定你在上面的sn-p之前设置了authUser和authUser.roles吗？
你需要添加代码来处理authUser为空的情况，你的代码假定它永远不会为空。
你能提供更多关于你的问题的细节吗？这太笼统了，无法弄清楚

标签： vue.js nuxt.js

【解决方案1】：

在 created() 钩子（如 data() 块，所以在 after 或到 created hook 之后设置值，如下所示

data (){
    return{
      projects: null
    }
  },
created(){
this. projects =this.$store.state.authUser.roles
}

注意：最好使用 getter 获取存储数据

this.$store.getters.AUTH_USER_ROLES


const store = new Vuex.Store({
  state: {
    authUser: {
roles:[]
}
  },
  getters: {
    AUTH_USER_ROLES: state => state.authUser.roles,
  }
})

【讨论】：

【解决方案2】：

喜欢这样吗？

data (){
  return{
    projects: this.$store.state.authUser && this.$store.state.authUser.roles
  }
},

【讨论】：