javascript - 等待mapstate中的数据完成加载

Question

我存储了一个 userProfile在 Vuex能够在我的整个项目中访问它。但是如果我想在 created() 中使用它钩子(Hook)，配置文件尚未加载。该对象存在，但其中没有存储数据。至少在页面的初始加载时。如果我稍后访问它(例如通过单击按钮)，一切都会完美运行。
有没有办法等待数据完成加载？
这里是如何 userProfile设置在 Vuex :

mutations: {
    setUserProfile(state, val){
      state.userProfile = val
    }
},
actions: {
    async fetchUserProfile({ commit }, user) {
      // fetch user profile
      const userProfile = await fb.teachersCollection.doc(user.uid).get()
  
      // set user profile in state
      commit('setUserProfile', userProfile.data())
    },
}

这是我要访问它的代码:

<template>
<div>
  <h1>Test</h1>
  {{userProfile.firstname}}
  {{institute}}
</div>
</template>


<script>
import {mapState} from 'vuex';

export default {
  data() {
    return {
      institute: "",
    }
  },
  computed: {
      ...mapState(['userProfile']),
  },
  created(){
    this.getInstitute();
  },

  methods: {
    async getInstitute() {
      console.log(this.userProfile); //is here still empty at initial page load

      const institueDoc = await this.userProfile.institute.get();
      if (institueDoc.exists) {
        this.institute = institueDoc.name;
      } else {
        console.log('dosnt exists') 
      }
      
    }
  }
}
</script>

通过登录控制台，我发现问题出在代码运行的顺序上。一、方法getInstitute运行，然后 action然后是 mutation .
我已尝试添加 loaded参数并使用 await 播放解决此问题，但没有任何效果。

Answer 1

即使你制作 created或 mounted异步，它们不会延迟您的组件渲染。它们只会延迟 await 之后的代码的执行。 .
如果您不想在 userProfile 之前渲染模板的一部分(或全部)有一个 id (或您的用户拥有的任何其他属性)，只需使用 v-if

<template v-if="userProfile.id">
  <!-- your normal html here... -->
</template>
<template v-else>
   loading user profile...
</template>

在 userProfile 时执行代码更改，您可以放置​​ watcher关于它的内在属性之一。在您的情况下，这应该有效:

export default {
  data: () => ({
    institute: ''
  }),
  computed: {
    ...mapState(['userProfile']),
  },
  watch: {
    'userProfile.institute': {
      async handler(institute) {
        if (institute) {
          const { name } = await institute.get();
          if (name) {
            this.institute = name;
          }
        } 
      },
      immediate: true
    }
  }
}

旁注:Vue 3 为这种模式提供了一个内置的解决方案，称为 Suspense .不幸的是，它只在少数地方被提及，它(还)没有被正确记录，并且有迹象表明 API 可能会改变。
但它非常棒，因为渲染条件可以与父级完全解耦。它可以包含在悬浮的 child 中。 child 唯一声明的是:“我正在加载”或“我已经完成加载”。当所有 suspensibles 都准备好后，就会渲染模板默认值。
此外，如果子项是动态生成的并推送了新的子项，则父悬念切换回回退(加载)模板，直到加载了新添加的子项。这是开箱即用的，您只需声明 mounted在 child 中异步。
简而言之，您对 Vue 2 的期望。