gpt4 book ai didi

javascript - 如何等待 View 组件的 Vuex 状态初始化?

转载 作者:行者123 更新时间:2023-12-02 21:31:59 25 4
gpt4 key购买 nike

我正在构建一个电影网站来练习 VueJS。在应用程序初始化期间,我从第 3 方 API 获取电影类型列表。由于应用程序的多个组件都需要此列表,因此我通过 Vuex 管理和存储它,如下所示:

ma​​in.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)
}
}
}
})

现在,在我的主页 View 中,我想检索每种类型的电影列表,如下所示:

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===[] 。如果我导航到另一个 View 并返回,sections 将按预期保存一组流派对象。

问题:如何正确等待部分加载流派? (由于该组件未调用 getGenreList 操作,因此我无法使用 this 方法)

我正在考虑在 sections 上的 Watcher 中实现电影列表检索,而不是在 mounted() 中,但不确定这是否是正确的方法。

最佳答案

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

但是,如果您只能...尝试在一个组件系列中执行类似这样的操作。 ( parent 将 Prop 传递给 child ,控制它);

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

https://v2.vuejs.org/v2/api/#watch - 对于这一点,您最好应该在观察者上使用 immedaite 标志并删除已安装的。带有 immedaite 标志的观察者有点像,观察者 + 立即创建

关于javascript - 如何等待 View 组件的 Vuex 状态初始化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60601094/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com