VueJS在每个组件上添加生命周期挂钩

Question

所以我的应用程序中有一个加载器屏幕，其想法是在beforeCreate钩子上显示加载器屏幕，以便用户看不到正在渲染的内容，然后在安装的钩子上删除加载器屏幕。

当您有两个或三个视图/组件时，这很有趣，而且很不错，但是目前我的应用程序还不止这些，将其添加到每个组件/视图中对我来说意义不大。

所以我想知道，是否有任何方法可以将某些内容添加到globalScope的beforeCreate和Mounted挂钩中。像这样：

main.js

Vue.beforeCreate(() => {
    //Show the loader screen
});

Vue.mounted(() => {
    //Hide the loader screen
});

这样，它将应用于每个组件和视图

Answer 1

您可以为此目的使用mixin，并导入组件。

//mixins.js
export default {
  beforeCreate() {},
  mounted() {}
}

在组件中添加mixins：[importedMixins]

您将有权访问“此”。

实际上，您可以使用vuex来（mapGetters，mapActions等）

如果您不想在每个组件中都包含mixins，请尝试使用vue插件系统（https://vuejs.org/v2/guide/plugins.html）：

//mixins.js
export default {
  beforeCreate() {},
  mounted() {}
}

并像这样使用您的插件 Vue.use(MyPlugin, { someOption: true })