类别组件在创建时执行 api 调用答案

【问题标题】：Category component do api call on created类别组件在创建时执行 api 调用
【发布时间】：2018-01-14 12:31:34
【问题描述】：

目前我的类别组件正在对其创建进行 http api 调用。

所以当我从索引转到类别时，http 调用的结果是有效的。

但是现在当我更改类别时，我从 localhost:8080/category/1 转到 localhost:8080/category/2 我的组件没有重新渲染，所以它没有再次创建，我的 http 调用函数不会再次触发我想要的。

    async created() {
        try {
            console.log(this.id);
            const response = await axios.get(`/api/category/getOne.php?id=${this.id}`, axiosConfig);
            console.log(response.data.records[0].name);
            this.category = [response.data.records[0].name];

        } catch (e) {
            this.errors.push(e);
            console.log(this.errors);
        }
    }

你们对我有什么建议，我应该把这个http调用不放在created ()中，而是放在methods {}中，然后检测url id是否改变并在它改变时执行这个函数？或者有一些更好的 vue 方法？

【问题讨论】：

您应该注意id 的值，并且每次更改都会触发新请求。
此外，如果您使用的是 Vue 路由器，那么您可以查看整个 $route 对象，当它发生变化时，您可以使用新参数发出 HTTP 请求，但您显然应该将它从创建的钩子移到分离方法。

标签： javascript vue.js vuejs2 lifecycle

【解决方案1】：

我将上面的代码移至methods {} 并在created() 上调用它，并像这样更改id：

created() {
    this.getData(this.id);
},
watch: {
    '$route.params.id'(newId, oldId) {
        this.getData(newId);
    }
}

正如@Belmin Bedak 在 cmets 部分所建议的那样。

【讨论】：