Saya sedang membangun situs web Film untuk berlatih di VueJS. Selama inisialisasi aplikasi, saya mendapatkan daftar genre film dari API pihak ketiga. Karena daftar ini diperlukan di beberapa komponen aplikasi, saya mengelola dan menyimpannya melalui Vuex, seperti:

main.js:

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

index.js Vuex:

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

Sekarang, dalam tampilan Beranda saya, saya ingin mengambil daftar film untuk setiap genre, kira-kira seperti ini:

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>

Masalahnya di sini adalah, pada pemuatan awal, sections===[] karena daftar genre belum dimuat. Jika saya menavigasi ke tampilan lain dan kembali, sections menyimpan array objek genre seperti yang diharapkan.

Pertanyaan: Bagaimana saya bisa menunggu dengan benar di sections untuk memuat genre? (karena tindakan getGenreList tidak dipanggil dari komponen itu, saya tidak dapat menggunakan metode ini)

Saya berpikir untuk menerapkan pengambilan daftar film di Watcher di sections alih-alih di mounted() tetapi tidak yakin apakah itu pendekatan yang tepat.

0
LundinCast 9 Maret 2020, 15:59

1 menjawab

Jawaban Terbaik

Ya, itu pendekatan yang tepat, itulah gunanya pengamat.

Tapi jika Anda hanya bisa... coba lakukan tindakan seperti ini di dalam satu keluarga komponen. (orang tua memberikan alat peraga kepada anak-anak, mengendalikannya);

Anda dapat membaca artikel ini, tentang vuex - https: //markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/. Mungkin akan memperjelas ide ini. Hanya saja, jangan simpan semuanya di vuex, karena terkadang itu tidak masuk akal

https://vuejs.org/v2/api/#watch - untuk yang ini sebaiknya anda harus menggunakan tanda immedaite pada pengamat dan menghapus yang dipasang. Pengamat dengan bendera immedaite agak, pengamat + dibuat sekaligus

1
BigKamil5 9 Maret 2020, 14:34