Vuex：子组件等待父组件调度操作

Question

父组件（仪表板）：

<template>
<div id="dashboard">
  <Header />
  <b-container>
    <div>
      <b-row>
        <b-col>
          <Overview />
        </b-col>
      </b-row>
    </div>
  </b-container>
</div>
</template>

<script>
import Header from '@/components/common/Header';
import Overview from '@/components/dashboard/Overview';
import { mapGetters } from 'vuex';

export default {
  name: 'dashboard',
  components: {
    Header,
    Overview
  },
  mounted() {
    const sessionId = this.$cookie.get('connect.sid');
    this.$store.dispatch('user/getUser', sessionId).then((userData) => {
      this.$store.dispatch('project/getProject', userData.data.user);
    });
  },
  computed: {
    ...mapGetters('user', {
      user: 'getUser'
    })
  }
}
</script>

子组件（概述）：

<template>
<div class="overview">
  <div class="overview__title">
    <h1>
      Welcome {{user.cn[0]}} // Works
    </h1>
  </div>
  <div class="overview__project">
    <p v-for="project in runningprojects" :key="project._id">
      {{project.name}} // Does not work at refresh
    </p>
  </div>
</div>
</template>

<script>
import {mapGetters} from 'vuex';
export default {
  name: 'dashboard-overview',
  data() {
    return {
      runningprojects: []
    }
  },
  computed: {
    ...mapGetters('user', {
      user: 'getUser'
    }),
    ...mapGetters('project', {
      projects: 'getProjects',
      allProjects: 'getAllProjects'
    })
  },
  mounted() {
    console.log("mounted this.projects", this.projects);
    // add something from this.projects to this.runningprojects
  },
  methods: {
    calcReq() {
      ...
    },
    ...
}
</script>

在我的仪表板组件（父级）中，我使用vuex操作dispatch('user/getUser)获取用户数据，之后我获取此用户dispatch('project/getProject)的项目。

在我的Overview组件（子）中，我想显示该用户的项目信息。我打电话给我的mapGetters，我在runningprojects里面有一个组件变量data()。在我的mounted()生命周期中，我想将数据从我的getter推送到此数据数组。

给出以下问题：

当我刷新我的应用程序时，在父组件（仪表板）中完成调度作业之前，将调用我的子组件console.log中的mounted()。

它仅在我的本地文件中更改某些内容并且vue-cli进行实时重新加载时才有效。

Answer 1

因为vue应用程序的页面lifecycle。当组件渲染mounted在created之后调用时，它不会等待ajax或任何async调用。

一个解决方案是不要render child component直到async返回

<template>
<div id="dashboard">
  <Header />
  <b-container>
    <div>
      <b-row>
        <b-col>
          <Overview v-if="finished"/>
        </b-col>
      </b-row>
    </div>
  </b-container>
</div>
</template>

<script>
import Header from '@/components/common/Header';
import Overview from '@/components/dashboard/Overview';
import { mapGetters } from 'vuex';

export default {
  name: 'dashboard',
  data() {
    return {
      finished: false,
    }
  },
  components: {
    Header,
    Overview
  },
  mounted() {
    const sessionId = this.$cookie.get('connect.sid');
    this.$store.dispatch('user/getUser', sessionId).then((userData) => {
      this.$store.dispatch('project/getProject', userData.data.user);
      this.finished = true;
    });
  },
  computed: {
    ...mapGetters('user', {
      user: 'getUser'
    })
  }
}
</script>

只需在v-if中添加一个child component，当dispatch返回时，然后将值设置为true，这将呈现child component，然后mounted将具有您想要的值

其他解决方案是。

使用updated函数代替mounted，当状态发生变化时将调用它。