时间戳

首页 > 解决方案 > 如何在组件安装之前使用 vue.js 运行一些初始化代码？

vue.js - 如何在组件安装之前使用 vue.js 运行一些初始化代码？

问题描述

在我的 mainApp.vue中，我有：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  mixins: [logoutMixin],
  beforeCreate() {
    console.log('do initialization stuff')
  }
};
</script>

在一个单独的Settings.vue中，我有：

export default {
  name: "Settings",
  data() {
    console.log(this.$User);
    return {
      User: this.$User
    };
  },
  mounted() {
    console.log("Mounted");
  }
};

不知何故，在'sdata之前运行。有一些我可以执行初始化代码的顶级地方吗？AppbeforeCreate

标签： vue.js

解决方案

您可以main.js/ts在挂载主要组件之前在文件中执行此操作：

doInitializationStuff()

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在异步初始化的情况下（小心，不要将它用于长异步函数）：

doInitializationStuff().then(() => {
 new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
})

推荐阅读