Javascript 计算属性中的Vuex getters在加载完整页面之前显示未定义

我试图使用vuex中的mapGetters函数提取的数据创建计算属性，但在页面/dom完全加载之前，我总是无法定义

下面是一个isRegistered computed属性的示例，我使用它来隐藏/显示某些按钮

computed: {
      ...mapGetters(['solos', 'user']),
      isRegistered () {
        return this.solos.registered.indexOf(this.user._id) !== -1
      }
}

以下是使用isRegistered computed属性的按钮的HTML

<a href="#" class="register-button" v-if="!isRegistered">REGISTER NOW</a>
<a href="#" class="registered-button" v-if="isRegistered">REGISTERED</a>

下面是我设置相应getter的操作

getTournament: ({commit}, type) => {
    return feathers.service('tournaments').find({
      query: {
        type: type,
        status: 'registering'
      }
    }).then(tourney => {
      commit(type.toUpperCase(), tourney.data[0])
    })
}

这是相应的突变

const mutations = {
  SOLOS (state, result) {
    state.solos = result;
  }
};

这是相应的getter

const getters = {
   solos (state) {
     return state.solos
   }
}

我遇到的问题是，在页面/DOM完全加载之前，该值最初显示为未定义，导致.indexOf抛出以下错误：

TypeError: Cannot read property 'indexOf' of undefined

我唯一能够让它工作的方法是在computed属性上使用if语句来检查状态数据是否已经加载

isRegistered () {
  if (this.solos._id) return this.solos.registered.indexOf(this.user._id) !== -1
}

---

这似乎不是一种正确的做事方式。我做错了什么？

问题可能与vue生命周期有关

在钩子中，组件的计算属性、观察者和数据被初始化（同步运行），但solos getter在一个承诺内运行（异步运行），因此生命周期将继续，而没有承诺完成

创建钩子完成后，将创建观察者，这意味着如果数据发生更改，它们将反映在DOM中，但只有在承诺返回结果后，独奏才会被填充。因此，在应用程序初始化时，承诺没有结束，但一旦结束，数据就会更新并显示

---

避免此错误的方法是使用

v-if=“solos.registed”

，但我仍在寻找更好的方法来解决此问题。

这是正确的做法。Javascript是防御性的，在访问内部对象属性之前，你必须检查对象是否就位。你的最后一段代码几乎就是你应该怎么做的。好的，感谢你们两位！你找到更好的方法了吗@tomurlhNo但是v-if的存在有一个很好的理由，所以考虑到它非常适合这种情况，它可以被认为是一个合适的解决方案

isRegistered () {
  if (this.solos._id) return this.solos.registered.indexOf(this.user._id) !== -1
}