Совместно использовать данные между родственными компонентами, если данные еще не сохранены в Vuex?

Question

Если у меня есть два родственных компонента, которые совместно используют одни и те же данные, и эти данные не уже сохранены в Vuex (например, прямая загрузка страницы в api/v1/calendars/:id, вызовет этот ресурс в пределахоба компонента необходимы? Я прочитал следующее:

Компоненты Vue должны быть максимально автономными и максимально изолированными

Если это так, то запросданные из Vuex из обоих компонентов верны, но приложение будет выполнять два сетевых вызова, когда требуется только один, если эти данные еще не доступны в 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>

Answer 1

Простейшим способом было бы заставить ваши компоненты (явно) не заботиться о том, были ли выбраны календари.

Просто скажите магазину, чтобы он покупал, но действие решает, действительно ли это необходимо.

Предполагается, что Vuex является односторонним потоком данных, поэтому информация о состоянии не возвращается от действия к компоненту, вместо этого компонент всегда просто ожидает поступления данных.

Чтобы сделать вещи реактивными, используйте комбинацию computed и getter.

1012 * компонент *

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