Как ждать инициализации состояния Vuex из компонента представления? - PullRequest
Новая
       7

Как ждать инициализации состояния Vuex из компонента представления?

0 голосов
/ 09 марта 2020

Я создаю веб-сайт Mov ie для практики на VueJS. Во время инициализации приложения я получаю список жанров mov ie из стороннего API. Поскольку этот список необходим в нескольких компонентах приложения, я управляю им и храню его через Vuex, например:

main. js: 

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
  created () {
    this.$store.dispatch('getGenreList')
  }
}).$mount('#app')

Индекс Vuex. js: 

export default new Vuex.Store({
  state: {
    genres: []
  },
  mutations: {
    setGenreList (state, payload) {
      state.genres = payload
    }
  },
  actions: {
    async getGenreList ({ commit }) {
      try {
        const response = await api.getGenreList() // axios call defined in api.js
        commit('setGenreList', response)
      } catch (error) {
        console.log(error)
      }
    }
  }
})

Теперь на моем домашнем экране я хочу получить список фильмов для каждого жанра, что-то вроде этого:

Home. vue: 

<script>
import { mapState } from 'vuex'
import api from '../api/api'

export default {
  name: 'home',
  data () {
    return {
      movies: null
    }
  },
  computed: {
    ...mapState({
      sections: state => state.genres
    })
  },
  async mounted () {
    const moviesArray = await Promise.all(
      this.sections.map(section => {
        return api.getMoviesByGenre(section.id)
      })
    )
    this.movies = moviesArray
  }

}
</script>

Проблема здесь в том, что при начальной загрузке sections===[], поскольку список жанров еще не загружен. Если я перейду к другому представлению и вернусь, sections будет содержать массив объектов жанров, как и ожидалось.

Вопрос: Как правильно ожидать загрузки sections с жанрами ? (поскольку действие getGenreList не вызывается из этого компонента, я не могу использовать этот метод)

Я думал о реализации поиска списка mov ie в Watcher на sections вместо mounted(), но не уверен, что это правильный подход.

1 Ответ

1 голос
/ 09 марта 2020

Да, это правильный подход, для этого и нужны наблюдатели.

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

Вы можете прочитать эту статью о vuex - https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/. Возможно, это прояснит эту идею. Просто просто не храните в vuex все, потому что иногда это «не имеет смысла»

https://vuejs.org/v2/api/#watch - для этого предпочтительно использовать флаг immedaite на наблюдателе и удалять смонтированные , Watcher с флагом immedaite - это своего рода, watcher + создан сразу

...