데이터가 Vuex에 아직 유지되지 않은 경우 형제 구성 요소 간에 데이터를 공유하시겠습니까?

데이터가 Vuex에 아직 유지되지 않은 경우 형제 구성 요소 간에 데이터를 공유하시겠습니까?

동일한 데이터를 공유하는 두 개의 형제 구성 요소가 있고 해당 데이터가 아직 유지되지 않은 경우Vuex(예: 직접 페이지 로드)api/v1/calendars/:id양쪽 컴포넌트 내에서 해당 자원에 대한 콜이 필요합니까?다음을 읽었습니다.

Vue 컴포넌트는 가능한 한 독립적이고 격리되어 있어야 합니다.

그것이 사실일 경우, 데이터 요구는Vuex두 컴포넌트 모두 올바르지만 어플리케이션은 2개의 네트워크 콜을 발신합니다.단, 그 데이터가 이미1개의 컴포넌트에서 사용할 수 없는 경우 1개의 네트워크 콜만 필요합니다.Vuex.

필요한 자원에 대해 단일 네트워크를 호출하여 해당 페이지의 여러 컴포넌트 간에 데이터를 공유하는 것이 이상적입니다.Vuex.

이 코드를 두 컴포넌트, 특히 이 컴포넌트에 복제합니다.created()방법.

<script>
import store from '@state/store'
import { calendarComputed } from '@state/helpers'

export default {
  data() {
    return {
      calendar: null,
    }
  },
  computed: {
    ...calendarComputed,
  },
  created() {
    // Are calendars already persisted?
    if (!this.calendars.length) {
      store.dispatch('calendar/getCalendars').then((res) => {
        this.calendar = res.find((calendar) => { if (calendar.id == this.$route.params.id) return calendar })
      })
    } else {
      this.calendar = this.calendars.find((calendar) => { if (calendar.id == this.$route.params.id) return calendar })
    }
  },
}
</script>

가장 간단한 방법은 캘린더가 Import되었는지 여부에 대해 컴포넌트가 (명시적으로) 신경쓰지 않도록 하는 것입니다.

단순히 스토어에 가져오라고 지시하지만 실제로 가져올 필요가 있는지 여부는 액션에 따라 결정됩니다.

Vuex는 단방향 데이터 흐름이므로 작업으로부터 컴포넌트로 상태 정보가 반환되지 않고 컴포넌트는 항상 데이터가 도착할 때까지 기다립니다.

반응을 일으키려면 다음 항목을 조합하여 사용합니다.computed그리고.getter.

요소

created() {
  /* tell the store 'this is what I need' */
  store.dispatch('calendar/getCalendars');
},
...
computed: {
  calendar() {
    /* reactive - initially null, then gets a value when the store is updated */
    return this.$store.getters['calendar/calendarById'](this.$route.params.id)
  },
},

가게

getters: {
  calendarById: (state) => {
    /* return a function so that param can be passed from component */
    return (id) => state.calendars ? state.calendars.find(c => c.id === id) : null;
  },
}

actions: {
  getCalendars (store) {
    /* only perform the fetch if the store does not already contain the data */
    if (!store.state.calendars) {
      fetch(calendarsUrl).then(res => store.commit('setCalendars', res); // e.g
    }
  },
}

언급URL : https://stackoverflow.com/questions/55250487/share-data-between-sibling-components-if-data-is-not-already-persisted-to-vuex