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

Question

我正在尝试使用在 vuex 中使用 mapGetters 函数提取的数据来创建计算属性，但是在页面/dom完全加载之前，我总是不确定。

这是我用来隐藏/显示某些按钮的 isRegistered 计算属性的示例。

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

这是使用 isRegistered 计算属性的按钮的 HTML。

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

我正在通过在创建的函数中调用的操作来设置吸气剂

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

这是我设置相应吸气剂的操作

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

我遇到的问题是该值最初显示为未定义，直到 PAGE/DOM 完全加载，导致 .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 生命周期有关。

在created钩子上，组件的计算属性、观察者和数据被初始化（同步运行），但solos getter 在一个 Promise 内运行（异步运行），因此生命周期在没有完成 Promise 的情况下继续。

created hook 完成后，watchers 被创建，这意味着如果数据发生变化，它们将反映在 DOM 中，但只有在 Promise 返回结果后，才会填充独奏。 所以在应用程序初始化时，promise 并没有结束，但是一旦它结束，数据就会更新并显示出来。

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