计算属性中的 Vuex getter 显示未定义，直到整个页面加载 [英] Vuex getters in computed properties showing undefined until full page load

问题描述

我正在尝试使用通过 vuex 中的 mapGetters 函数提取的数据创建计算属性，但我总是未定义，直到页面/dom 完全加载.

I'm trying to create computed properties using data pulled with the mapGetters function in vuex, but I'm always getting undefined, until the page/dom fully loads.

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

Here's an example for an isRegistered computed property that I use to hide/display certain buttons.

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

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

Here is the HTML for buttons that use the isRegistered computed property.

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

我正在通过在创建的函数中调用的操作设置 getter

I'm setting the getters via an action which I'm calling in the created function

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

这是我设置相应getter的动作

Here's my action for setting the corresponding getters

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

Here's the corresponding getter

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

我遇到的问题是该值最初显示为未定义，直到 PAGE/DOM 完全加载，导致 .indexOf 抛出以下错误:

The issue I'm having is the value is initially showed as undefined until the PAGE/DOM is fully loaded, causing .indexOf to throw the following error:

TypeError: Cannot read property 'indexOf' of undefined

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

The only way I've been able to get this to work is to use an if statement on the computed property that checks if the state data has loaded yet.

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

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

This doesn't seem like a proper way of doing things. What am I doing wrong?

推荐答案

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

The issue is probably about the vue lifecycle.

在 created 钩子上，计算属性、观察者和数据组件被初始化(同步运行)，但是solo getter在一个promise内运行(异步运行)，所以生命周期在没有promise get的情况下继续完成.

At the created hook, the computed properties, watchers and data of component are initialized (runs synchronously), but solos getter runs inside a promise (runs asynchronously), so the lifecycle continue without the promise get done.

当 created 钩子完成后，观察者就被创建了，这意味着如果数据发生变化，它们将反映在 DOM 上，但只有在 promise 返回结果，独奏将被填满.所以在应用程序初始化时，promise 并没有结束，但是一旦结束，数据就会更新并显示出来.

When created hook is finished, the watchers was created, which means if data get changed, they will be reflected at the DOM, but only after the promise returns the result, the solos will be filled. So at the initialization of the app, the promise is not ended, but as soon it ends the data is updated and displayed.

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

A way to avoid this error is to use v-if="solos.registered", but I'm still searching for a better way to solve this.

这篇关于计算属性中的 Vuex getter 显示未定义，直到整个页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！