View 구성 요소에서 Vuex 상태 초기화를 기다리는 방법

View 구성 요소에서 Vuex 상태 초기화를 기다리는 방법

저는 VueJs에서 연습하기 위해 Movie 웹사이트를 만들고 있습니다.앱 초기화 시 서드파티 API에서 영화 장르 목록을 가져옵니다.이 목록은 앱의 여러 구성 요소에서 필요하기 때문에 다음과 같이 Vuex를 통해 관리하고 저장합니다.

main.filename:

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해당 컴포넌트에서 액션이 호출되지 않아 이 메서드를 사용할 수 없습니다.)

영화 목록 검색 기능을 워쳐에 구현하려고 합니다.sections대신mounted()그게 옳은 방법인지는 잘 모르겠어요.

그래, 그게 올바른 접근법이야, 그게 감시자들이 하는 일이야.

하지만 당신이 할 수만 있다면...하나의 컴포넌트 패밀리 내에서 이와 같은 행동을 시도한다.(부모가 자녀에게 소품을 전달하고 제어한다.)

vuex - https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/에 대한 이 문서를 읽을 수 있습니다.아마 이 생각을 명확히 할 수 있을 것이다.모든 것을 vuex에 저장하지 않는 것만으로 의미가 없을 수 있습니다.

https://vuejs.org/v2/api/ #watch - 이 경우 를 사용하십시오.immedaitewatcher에 플래그를 부착하고 delete mounted를 실행합니다.immedaite 깃발을 가진 Watcher는 한 번에 생성되는 watcher+입니다.

언급URL : https://stackoverflow.com/questions/60601094/how-to-wait-on-vuex-state-initialization-from-a-view-component