Vue 在使用前等待来自 props 的数据

Question

我一直遇到一个问题，我正在等待来自道具的数据，以便在我创建的钩子中做某事。它不断抛出诸如“this.value is not defined”之类的错误（因为它还没有从prop加载）

我已使用v-if 修复了其中一些问题，并且仅在需要时使用。但是在某些情况下，我想在我的创建中使用该道具信息，当发生这种情况时，我最终会遇到错误并且不知道如何最好地告诉创建的那部分在运行之前“等待”数据。

有什么建议吗？

--

更新以添加一些示例代码。

在 App.js 页面上，我正在调用“userInfo”并将其设置为这样的数据。我这样做有两个原因。首先检查用户是否登录，其次花时间保存用户信息，因为它将在以后在整个应用程序中使用。 （请注意，user 和 userInfo 不同，包含不同的信息。User 是电子邮件/密码，而 userInfo 是用户名、简历等）

data() {
  return {
    user: null,
    userInfo: null,
  }
},
created(){
//let user = firebase.auth().currentUser
  firebase.auth().onAuthStateChanged((user) => {
    if(user){
      this.user = user
      let ref = db.collection('users')
      .where('user_id', '==', this.user.uid)
      ref.get().then(snapshot => {
      snapshot.forEach(doc => {
        this.userInfo = doc.data()
      })
    })

    } else {
      this.user = null
    }
  })
},

现在，我在使用 v-bind 中传递这些信息。然后在我需要一些信息的地方使用道具调用它。

当我想做一些事情时，问题就来了 -

if(this.userInfo) {
  value = true  
}

调用this.userInfo会抛出错误“this.userInfo is null”（我在页面的data()中默认设置为null）。

Answer 1

所以我认为这里接受的答案并不能完全解决 OP 的问题，因为仍然存在一些边缘情况，如果 API 返回，您的 prop 字面上会变为空或 null，或者您可能正在处理一些您不知道的项目'无法控制父组件。所以在这些情况下，你可以通过检查 prop 在 created 钩子中是否已经可用来在内部处理这个问题，如果没有，你应该动态观察这个 prop，直到它可用。

// your component
export default {
  props: ['userInfo'],

  created() {
    // check if the prop userInfo available or not
    if (this.userInfo) {
      // do your thing
    } else {
      // start watching this prop
      const unwatch = this.$watch('userInfo', () => {
        if (!this.userInfo) return

        // do your thing when userInfo is available

        // tear down this watcher as you now no longer need it
        unwatch()
      })
    }
  }
}

Answer 2

我能想到的方法至少有两种：

1。依赖注入

父/根到provide组件树下的数据/对象和接收端（子）到inject它们。

家长

{
  data: () => ({
    userInfo: null
  }),

  created() {
    // Populates data via Firebase 
    // Code omitted for brevity...

    this.userInfo = doc.data();
  },

  provide() {
    return Object.defineProperty({}, 'userInfo', {
      get: () => this.userInfo
    })
  }
}

儿童

// Children
{
  inject: ['userInfo'],

  created() {
    if (this.userInfo) {
      // Do something 
    }
  },
  mounted() {
    if (this.userInfo) {
      // Do something 
    }
  },
  // Any lifecycle hooks, methods or virtually anywhere needing a reference to this object
}

2。 Vuex 商店

而不是传递道具并不得不处理可能的异步问题；您可以让 Vuex 为您同步状态，而不必担心数据是 null 或 undefined。

商店

export default {
  state: {
    userInfo: null
  },
  mutations: {
    UPDATE_USER(state, payload) {
      state.userInfo = payload;
    }
  }
}

父/App.js

export default {
  created() {
    // On firebase success callback
    this.$store.commit('UPDATE_USER', doc.data());
  }
}

儿童

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState([
      'userInfo'
    ])
  },

  created() { },
  mounted() { },
  methods() { 
    if (this.userInfo) {
      // Do something safely
    }
  },
  // Anywhere
}

Answer 3

正如 cmets 中已经提到的，您遇到了 Promise 解决问题。当通过 Promise 将结果作为 Prop 传递时，该结果基本上是空的，最终会导致您的子组件 created() 钩子出现错误。

我建议您使用v-if，就像您在子组件本身中所做的那样。但是，我会在父组件中使用v-if 来简单地显示/隐藏子组件。这不仅应该解决您的 created() 挂钩中的问题，而且还有助于在您的子组件中建立一个更具可读性的标记，您可以在其中删除所有 v-ifs。

所以让我们假设你有这样的父/子关系。

<SomeParentComponent>
  <SomeChildComponent :someProp="yourProp" />
</SomeParentComponent>

在解析 Promise 后设置 yourProp 时，初始值将是 null、undefined 或您设置的任何值。为避免传入一个空的 prop，您可以将其包装在 v-if 中，其表达式的计算结果为 yourProp，就像这样。

<SomeParentComponent>
  <SomeChildComponent :someProp="yourProp" v-if="yourProp" />
</SomeParentComponent>                           <!-- ^-- See here -->

这样做，只有在设置yourProp 时才会呈现子级，因此您不会再收到任何错误。

Answer 4

created 钩子中应该有道具。假设这些值是同步的。尝试添加default 值，以删除不必要的v-if 指令。这应该可以解决同步和异步数据的问题。

{
  props: {
    length: {
      type: Number,
      default: 0,
    },
  },
}