Vuex: 하위 구성 요소가 상위 구성 요소 디스패치 작업을 기다립니다.

Vuex: 하위 구성 요소가 상위 구성 요소 디스패치 작업을 기다립니다.

상위 컴포넌트(대시보드):

<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()라이프 사이클 데이터를 게터에서 이 데이터 어레이로 푸시합니다.

다음과 같은 문제가 발생합니다.

응용 프로그램을 새로 고치면console.log내 아이 컴포넌트에서mounted()는 부모 컴포넌트(클라이언트)에서 디스패치 작업이 종료되기 전에 호출됩니다.

vue-cli가 라이브 새로고침을 수행하고 로컬 파일에서 변경 사항을 변경한 경우에만 작동합니다.

페이지 때문에lifecyclevue 앱의 경우.컴포넌트가 렌더링되는 경우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>

a를 추가해 주세요.v-if에서child component그리고 언제dispatch반환 후 값을 로 설정합니다.true그 결과,child component그 다음에mounted원하는 가치를 가질 수 있습니다.

다른 해결방법은 다음과 같습니다.

사용하다updated대신 기능하다mounted주(州)의 변화가 있을 때마다 그 이름을 부를 겁니다

언급URL : https://stackoverflow.com/questions/55243021/vuex-child-component-wait-for-parent-component-dispatch-action