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)。

在我的概览组件（子）中我想显示这个用户的项目信息。我调用我的 mapGetters 并且我在 data() 中有一个组件变量 runningprojects。在我的 mounted() 生命周期中，我想将数据从我的 getter 推送到这个数据数组。

给出如下问题：

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

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

Answer 1

因为vue应用的页面lifecycle。当组件呈现时 mounted 在 created 之后被调用并且它不会等待 ajax 或任何 async 调用。

一个解决方案是 render child component 直到 async return

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

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

其他解决方案是。

使用 updated 函数而不是 mounted，当状态发生变化时将调用该函数。

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

Vuex: Child component wait for parent component dispatch action

getter

action

vue.js

vuex