Javascript 组件获取逻辑应该放在哪里？

对于vue组件

页面

我从REST请求中检索其数据（或者可能是道具？

标题

和

内容

。我应该何时执行此REST获取请求？逻辑应该在哪里

现在，我尝试在组件

就绪

上提取，但此函数从未执行：

<template>
    <b-container class="bv-example-row">
        <h1>{{title}}</h1>

        <b-row>
            <b-col>
                {{content}}
            </b-col>
        </b-row>
    </b-container>
</template>

<script>
import api from '../../api'

export default {
    data() {
        return {
            id: '',
            slug: '',
            title: '',
            content: ''
        };
    },

    ready() {
        console.log('foo');
        this.fetchData();
    },

    methods: {
        fetchData() {
            api.getPageBySlug('sample-page', page => {
                this.$set('title', page.title);
                this.$set('content', page.content);
            });
        }
    }
};
</script>

{{title}}
{{content}}
从“../../api”导入api
导出默认值{
数据（）{
返回{
id:“”，
蛞蝓：“”，
标题：“”，
内容：“”
};
},
就绪（）{
console.log（'foo'）；
这是fetchData（）；
},
方法：{
fetchData（）{
api.getPageBySlug（'sample-page'，page=>{
本.$set（'title'，page.title）；
此.$set（'content'，page.content）；
});
}
}
};
Vue.js 2中不存在
ready（）
钩子

您可以将Ajax代码放在许多挂钩中。更常见的方法是使用以下其中一种：


beforeCreate（）
created（）
beforeMount（）
mounted（）

那么，什么应该指导你的决定呢？有些事情你必须考虑。

首先：同步执行Vue的初始化代码

这意味着，从技术上讲，在这些钩子中运行的任何异步代码只有在所有钩子结束后才会响应。请参见演示：


newvue({
el:“#应用程序”，
beforeCreate（）{
setTimeout（（）=>{console.log（'有史以来最快的异步代码（在beforeCreate开始）'）），0；
log（'beforeCreate hook executed'）；
},
创建（）{
log（'created hook executed'）；
},
beforeMount（）{
log（'beforeMount hook executed'）；
},
安装的（）{
console.log（“挂载的钩子已执行”）；
}
})

检查控制台。
Vue.js 2中不存在
ready（）
钩子

您可以将Ajax代码放在许多挂钩中。更常见的方法是使用以下其中一种：


beforeCreate（）
created（）
beforeMount（）
mounted（）

那么，什么应该指导你的决定呢？有些事情你必须考虑。

首先：同步执行Vue的初始化代码

这意味着，从技术上讲，在这些钩子中运行的任何异步代码只有在所有钩子结束后才会响应。请参见演示：


newvue({
el:“#应用程序”，
beforeCreate（）{
setTimeout（（）=>{console.log（'有史以来最快的异步代码（在beforeCreate开始）'）），0；
log（'beforeCreate hook executed'）；
},
创建（）{
log（'created hook executed'）；
},
beforeMount（）{
log（'beforeMount hook executed'）；
},
安装的（）{
console.log（“挂载的钩子已执行”）；
}
})

检查控制台。
文档中包含了一个很好的状态管理库。我认为值得一提的是，常用的方法是全局存储每个结果，vuex是vue最常用的状态管理库。在这种情况下，您将在钩子中触发一个操作，而不是请求本身。该操作将触发请求并用数据填充存储，然后可以跨所有组件使用这些数据。当多个组件使用同一端点时，这将节省大量通信量。它还可以很好地保持组件间的数据同步。@PhilipFeldmann也很好。我制作了一个演示来揭露这种情况。如果你还有其他想法，请告诉我！谢谢文档中包含了一个很好的状态管理库。我认为值得一提的是，常用的方法是全局存储每个结果，vuex是vue最常用的状态管理库。在这种情况下，您将在钩子中触发一个操作，而不是请求本身。该操作将触发请求并用数据填充存储，然后可以跨所有组件使用这些数据。当多个组件使用同一端点时，这将节省大量通信量。它还可以很好地保持组件间的数据同步。@PhilipFeldmann也很好。我制作了一个演示来揭露这种情况。如果你还有其他想法，请告诉我！谢谢