Question

我正在建立一个电影网站以在VueJS上进行练习。在应用初始化期间，我从第三方API获取电影流派列表。由于应用程序的多个组件都需要此列表，因此我可以通过Vuex对其进行管理和存储，如下所示：

main.js：

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

Vuex的 index.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操作，因此我无法使用this方法）

我当时正在考虑在sections而非mounted()上的Watcher中实现电影列表检索，但不确定是否正确。

Answer 1

是的，这是正确的方法，这就是观察者的目的。

但是，如果您只能...尝试在一个组件系列中执行类似的操作。（父母将道具传递给孩子，加以控制）；

您可以阅读有关vuex-https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/的文章。也许可以澄清这个想法。只是根本不将所有内容存储在vuex中，因为有时这没有意义

https://vuejs.org/v2/api/#watch-为此，最好您在观察者上使用immedaite标志并删除已安装的标志。带有immedaite标志的观察者有点，立即创建观察者+

如何从视图组件等待Vuex状态初始化？

1 个答案: