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

Question

我正在尝试使用在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

created () {
      this.getTournament('solos').catch(err => {})
}

这是我设置相应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;
  }
};

这是相应的吸气剂

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

我遇到的问题是,在PAGE/DOM完全加载之前,值最初显示为undefined,导致.indexOf抛出以下错误:

TypeError: Cannot read property 'indexOf' of undefined

我能够使其工作的唯一方法是在计算属性上使用if语句来检查状态数据是否已加载.

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

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

Answer 1

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

在创建的钩子中,计算的属性,观察者和组件的数据被初始化(同步运行),但solos getter在promise内运行(异步运行),因此生命周期继续而没有承诺完成.

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

避免这种错误的方法是使用v-if="solos.registered",但我仍在寻找一种更好的方法来解决这个问题.