如何在安装生命周期挂钩之前填充数组

Question

我在 getFeedingsAgain 中有一个简单的 API 调用。我在 "beforeMount" 中调用它，但我可以通过我的 console.logs 看到，一旦 "mounted" 被调用，我的 "catFeedingsAgain" 的数据值将保持为空。我试图在调用组件的 "mounted()" 生命周期挂钩之前填充 catFeedingsAgain 数组，因此 "mounted()" 挂钩中的函数可以使用该数组数据。我怎样才能完成这项工作？

感谢您的宝贵时间。

更新：现在包括整个组件代码。

注意：我基本上是在尝试用 getFeedingsAgain 中 API 调用的结果数组替换 Amcharts...Line Chart #2...."dataProvider" 中的初始数组。

```

<template>
  <!-- second chart group -->
  <div class="chart-block" style="padding-top:50px">
    {{ message }}
    <div ref="line" style="vertical-align: middle; display: inline-block; width: 50%; height: 30px;"></div>
    <div ref="column" style="vertical-align: middle;display: inline-block; width: 50%; height: 30px;"></div>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    props: ['message'],
    name: 'app',
    computed:{

    },
    created(){
      this.getFeedingsAgain(this.message);
    },
    data() {
      return {
        chartCatID: this.message,
        catFeedingsAgain: [],
        catMedicationsAgain: [],
      }
    },
    mounted () {
      /**
       * Line Chart #2
       */
      // this.getFeedingsAgain(this.message);
      console.log("mounted");
      console.log(this.catFeedingsAgain);
      // TODO: line = weight(waf) / day(created?)
      AmCharts.makeChart( this.$refs.line, {
        "type": "serial",
        "dataProvider": [ {
          "day": 1,
          "weight_after_food": 120
        }, {
          "day": 2,
          "weight_after_food": 54
        }, {
          "day": 3,
          "weight_after_food": -18
        }, {
          "day": 4,
          "weight_after_food": -12
        }, {
          "day": 5,
          "weight_after_food": -51
        }, {
          "day": 6,
          "weight_after_food": 12
        }, {
          "day": 7,
          "weight_after_food": 56
        }, {
          "day": 8,
          "weight_after_food": 113
        }, {
          "day": 9,
          "weight_after_food": 142
        }, {
          "day": 10,
          "weight_after_food": 125
        } ],
        "categoryField": "day",
        "autoMargins": false,
        "marginLeft": 0,
        "marginRight": 5,
        "marginTop": 0,
        "marginBottom": 0,
        "graphs": [ {
          "valueField": "weight_after_food",
          "showBalloon": false,
          "lineColor": "#ffbf63",
          "negativeLineColor": "#289eaf"
        } ],
        "valueAxes": [ {
          "gridAlpha": 0,
          "axisAlpha": 0,
          "guides": [ {
            "weight_after_food": 0,
            "lineAlpha": 0.1
          } ]
        } ],
        "categoryAxis": {
          "gridAlpha": 0,
          "axisAlpha": 0,
          "startOnAxis": true
        }
      } );

      /**
       * Column Chart #2
       */
      // TODO: column = dose(dosage) / day(created?)
      AmCharts.makeChart( this.$refs.column, {
        "type": "serial",
        "dataProvider": [ {
          "day": 1,
          "value": -5
        }, {
          "day": 2,
          "value": 3
        }, {
          "day": 3,
          "value": 7
        }, {
          "day": 4,
          "value": -3
        }, {
          "day": 5,
          "value": 3
        }, {
          "day": 6,
          "value": 4
        }, {
          "day": 7,
          "value": 6
        }, {
          "day": 8,
          "value": -3
        }, {
          "day": 9,
          "value": -2
        }, {
          "day": 10,
          "value": 6
        } ],
        "categoryField": "day",
        "autoMargins": false,
        "marginLeft": 0,
        "marginRight": 0,
        "marginTop": 0,
        "marginBottom": 0,
        "graphs": [ {
          "valueField": "value",
          "type": "column",
          "fillAlphas": 1,
          "showBalloon": false,
          "lineColor": "#ffbf63",
          "negativeFillColors": "#289eaf",
          "negativeLineColor": "#289eaf"
        } ],
        "valueAxes": [ {
          "gridAlpha": 0,
          "axisAlpha": 0
        } ],
        "categoryAxis": {
          "gridAlpha": 0,
          "axisAlpha": 0
        }
      } );
    },
    methods:{
      getFeedingsAgain(value) {
        axios.get(`${process.env.KITTY_URL}/api/v1/feedings/?cat__slug&cat__name=${value}`)
          .then(response => {
            console.log("getFeedingsAgain: ");
            console.log(response.data.results);
            this.catFeedingsAgain = response.data.results
          })
          .catch(error => console.log(error));
      },
      getMedicationsAgain(value) {
        axios.get(`${process.env.KITTY_URL}/api/v1/medications/?cat__slug=&cat__name=${value}`)
          .then(response => {console.log("catMedications: ");console.log(response.data.results); this.catMedications = response.data.results})
          .catch(error => console.log(error));
      },
    }
  }
</script>

<style>
  .amcharts-chart-div a{
    text-indent: -9999px;
    outline: none;
  }
</style>

```

Answer 1

您应该在创建视图时获取数据并且已经在观察数据，这发生在 created 挂钩处。

// rename beforeMount -> created
created(){
  this.getFeedingsAgain(this.message);
}

从Vuecreated码头

At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started

看来这就是您要找的东西

Answer 2

首先，你不应该使用beforeMount()方法。尽可能避免它。而是使用 created() 生命周期方法：

created() {
      this.getFeedingsAgain(this.message);
}

其次，您希望 在调用 之前填充一个数组。但是由于您的数据是从 API 异步加载的，因此您不能这样做。你不能 stop/pause mounted 事件发生。 Vue.js 不知道 API 响应何时可用。它可能需要 2 秒、3 秒或干脆失败。

您唯一的选择是在模板中使用 v-if。只要您的数组长度为零，您就可以隐藏 DOM 个元素或显示加载进度条。

首先，你不应该使用beforeMount()方法。尽可能避免它。而是使用 created() 生命周期方法：

created() {
      this.getFeedingsAgain(this.message);
}

其次，您希望 在调用 之前填充一个数组。但是由于您的数据是从 API 异步加载的，因此您不能这样做。你不能 stop/pause mounted 事件发生。 Vue.js 不知道 API 响应何时可用。它可能需要 2 秒、3 秒或干脆失败。

您唯一的选择是在模板中使用 v-if。只要您的数组长度为零，您就可以隐藏 DOM 个元素或显示加载进度条。

最后，您可能想要初始化某种图表，然后您可以使用 Vue.js 观察器或在 API 的 then() 块中初始化它。

编辑

我必须这样做，如果我希望在每次更改时初始化图表组件，我将使用 watcher，如下所示：

watch: {
    catFeedingsAgain() {
        AmCharts.makeChart(this.$refs.line, {
            "type": "serial",
            "dataProvider": this.catFeedingsAgain,
        });
    }
},

如果我只需要这样做一次，那么我会这样：

methods: {
    getFeedingsAgain(value) {
        axios.get(`${process.env.KITTY_URL}/api/v1/feedings/?cat__slug&cat__name=${value}`)
        .then(response => {
            this.catFeedingsAgain = response.data.results;
            AmCharts.makeChart(this.$refs.line, {
                "type": "serial",
                "dataProvider": this.catFeedingsAgain,
            });
        })
        .catch(error => console.log(error));
    },
}

两种方法都是正确的。这完全取决于上下文。

Answer 3

您还可以创建观察者，在变量发生变化时执行操作。

像这样

watch: {
  catFeedingsAgain: function() {
    AmCharts.makeChart( this.$refs.line, {
      "type": "serial",
      "dataProvider": this.catFeedingsAgain,
      ...
    });
  }
},

您可以在此处找到文档； https://vuejs.org/v2/guide/computed.html#Watchers

如何在安装生命周期挂钩之前填充数组

How to populate an array BEFORE mounted lifecycle hook

amcharts

vue.js

vuejs2

编辑