在异步组件中使用异步响应数据

Posted 2023-02-23

【中文标题】在异步组件中使用异步响应数据

【英文标题】：Usage of asynchronous response data in asynchronous components

【发布时间】：2022-01-16 06:07:18

【问题描述】：

下面是父组件和子组件 在此输入代码

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.');
        
    

每当 $store(vuex) 数据发生变化时，我都想绘制一个新图表。 但是，由于这个数据的响应是异步的，当子组件加载时，它可能已经或可能没有收到数据（在父组件中）。 我总是想用最初加载子组件时收到的数据绘制图表。 vue的组件也是异步加载的，那么这种情况下怎么控制呢？到目前为止，如果最初加载了子组件，则可能会或可能不会绘制图表。 期待vue高手的解答。 谢谢。

【问题讨论】：

您没有显示具有父/子关系的模板。如果您不想渲染没有数据的孩子，请不要渲染它，使用 v-if

【参考方案1】：

您可以使用mapState() 和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')
  
)