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

【问题标题】：Vuex: Child component wait for parent component dispatch actionVuex：子组件等待父组件调度动作
【发布时间】：2019-03-19 14:12:16
【问题描述】：

父组件（仪表板）：

<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 进行实时重新加载时才有效。

【问题讨论】：

标签： vue.js action vuex getter

【解决方案1】：

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

一种解决方案是在async 返回之前不要render child component

<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 返回时，将值设置为true，这将呈现child component，然后mounted 将具有您想要的值

其他解决方案是。

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

【讨论】：