再次调用挂载的生命周期答案

【问题标题】：Call the mounted lifecycle again再次调用挂载的生命周期
【发布时间】：2021-11-25 02:39:50
【问题描述】：

我目前有一个使用v-for 填充数据的表

<table v-for="(data, idx) in dataset" :key="idx">
</table>

然后，我有两个按钮可以插入或删除数据库中的某些内容，之后我想重新填充表格以反映这些新更改。

到目前为止，数据是从在mounted 生命周期中调用的 API 捕获的。

mounted: function (){ 
     axios.get(....).then((response => {
           this.dataset = response.data;
     });
}

因此，是否可以重新调用mounted 函数来调用API 从而重新运行v-for？

【问题讨论】：

您如何知道何时需要重新安装？使用 websocket 还是您想使用 setInterval 继续调用 API？

标签： javascript html vue.js vuejs2

【解决方案1】：

您可以将加载逻辑提取到可以从多个位置调用的方法中：

const Comp = {
  methods: {
    fetchData() {
      axios.get(....).then(response => {
        this.dataset = response.data;
      });
    },
    onSomeOtherAction() {
      // Do stuff.
      this.fetchData();
    },
  },
  mounted() { 
    this.fetchData();
  },
}

【讨论】：

fetchData 需要返回一个 Promise 才能与其他函数很好地组合。