Использование одного хранилища модулей vuex в нескольких родственных компонентах

Question

У меня есть одно глобальное состояние с несколькими модулями.

Теперь у меня есть различные компоненты для различных частей моей страницы.

у меня все настроено так /foo использует foo магазин (это работает). created метод загружает данные из API и записывает их в хранилище

Теперь у меня есть /foo/bar как другой (одноуровневый) компонент, но он должен получить доступ к тому же хранилищу, что и /foo, но я не могу заставить его работать.

если я войду /foo/bar/ в URL ничего нет в магазине. но если я переключусь на /foo, а затем вернуться к /foo/barданные находятся в хранилище и выводятся правильно

Я пытался зарегистрироваться /foo/bar как ребенок, который, казалось, не имел никакого эффекта (и на самом деле это не совсем ребенок, а просто еще одна страница с теми же данными...)

Я тоже пробовал

state: {
    ...mapState([
        'foo'
    )]
}

в /foo/barно это тоже не правильный путь

какая лучшая практика для

1. загрузить данные из API на created на любом из указанного набора страниц
2. получить доступ к указанным данным на любой из этих страниц (то есть в одном и том же магазине)

Я весь день пытался найти решение, но, похоже, я чего-то не понял.

Спасибо за вашу помощь:)

РЕДАКТИРОВАТЬ

на самом деле, пока я читаю свой вопрос еще раз, я думаю, что вся моя проблема в том, что данные не загружаются (потому что created метод не вызывается). Как я могу убедиться, что это происходит на любой странице, используя магазин и только один раз? я не могу просто написать вызов API в каждом created метод, могу я?

Answer 1

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

Обычно я делаю вызов API из одного компонента внутри метода. beforeMount, это гарантирует, что как только мой компонент будет создан, данные будут доступны для использования.

Кроме того, после вызова API я обновляю свое состояние, чтобы после этого я мог вызывать его из любого места.

Вы должны позаботиться о том, какой компонент загружается первым?

Если A является родителем B, то вы должны загрузить данные в A. Однако, если A и B являются братьями и сестрами, тогда вы должны загрузить данные в них обоих, потому что вы можете сначала получить доступ либо к компоненту A, либо к B, тогда вы не знаете, когда данные будут доступны. В этом случае я бы загрузил данные в оба компонента. Кроме того, добавьте кэш на свой сервер, чтобы вам не нужно было загружать те же данные снова.

Например:

государственный

{
  data: {}
}

Компонент А

export default {
  name: 'Batch',
  beforeMount() {
    this.getDataFromAPI();
  },
  methods: {
    // getDataFromAPI will store its return inside data with a mutation
    ...mapActions(['getDataFromAPI']),
    randomMethod() {
      // Now I can Use my state
      const data = this.$store.state.data;
    }
  }
};

Компонент Б

export default {
  name: 'Batch',
  methods: {
    randomMethodB() {
      // If component A was loaded first than component B and A is B's parent, then the state will be accessible in the same manner and it should be populated
      const data = this.$store.state.data;
    }
  }
};

действия

const getDataFromAPI = ({ commit }) => new Promise((resolve, reject) => { 

  // Call server
  const data = await callServer();
  commit('updateMyStateWithData');
  resolve(data);

});

export default {
  getDataFromAPI
}

Мутации

const mutations = {
  updateMyStateWithData(state, newData) {
    state.data = newData;
  }
}

export default mutations;

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

Я надеюсь, что это помогает!