A continuación se muestra el componente principal y el componente secundario, ingrese el código aquí
export default { name : 'parentNode', mounted: function () { var that = this; if (that.$store.state.auth.isAuthenticated) { that.$store.dispatch(ActionsType.GET_ALLCOINLIST).then(function (data) { // I want to use this store data in child components. that.$store.state.main.data = data; }); } }, }; export default { name : 'childNode', data : function(){ return { childData : {} } }, mounted : function(){ //How should I check if the data is loaded or not? }, computed : { childData : function(){ return this.$store.state.main.data; } }, watch : { childData : function(){ this.makeChart(); } }, methods : { makeChart : function(){ console.log('this function make a chart.'); } } }Quiero dibujar un nuevo gráfico cada vez que cambien los datos de $store(vuex). Sin embargo, dado que la respuesta de estos datos es asíncrona, cuando se carga el componente secundario, es posible que haya recibido o no los datos (en el componente principal). Siempre quiero dibujar un gráfico con los datos que recibí cuando se cargó inicialmente el componente secundario. Los componentes de vue también se cargan de forma asíncrona, así que en este caso, ¿cómo puedo controlarlo? A partir de ahora, si el componente secundario se carga inicialmente, el gráfico puede dibujarse o no. Espero con ansias la respuesta del experto en vue. Gracias.
Puedes usar mapState() y watch() :
import Vue from "https://cdn.skypack.dev/vue@2.6.14"; import * as vuex from "https://cdn.skypack.dev/vuex@3.6.2"; Vue.use(vuex) var store = new vuex.Store({ state: { count: 1, isLoaded: false, // mutate that when async call is finished }, mutations: { increment (state) { state.count++ } }, actions: { init() { setInterval(() => this.commit('increment'), 1000) // replace this with async call and mutate isLoaded in then() } } }); var app = new Vue({ el: '#app', store, data() { return { } }, computed: { ...vuex.mapState([ 'count' ]), }, watch: { count() { console.log('watch count', this.count) } }, mounted() { this.$store.dispatch('init') } })