vue 3 在 main.js 中创建事件之前

Question

我正在尝试使用beforeCreate在main.js. 这段代码在 Vue 3 中的等价物是什么？

new Vue({
  el: '#app',
  router,
  components: { App },
  store: store,
  beforeCreate() { this.$store.commit('initialiseStore');},
  template: '<App/>'
})

Answer 1

beforeCreate()仍然存在于 Vue 3 的选项 API 中。

\n

对于该代码片段，Vue 3 中的唯一区别是：

\n

\n

1. 应用程序实例的创建现在通过 完成Vue.createApp()。

   \n

   注意：在下面的示例中，我们使用extends: App此处以便可以添加beforeCreate()挂钩。否则，我们可以简单地createApp(App)这样做。

   \n
\n

2. Vue 插件是通过应用程序实例的use()方法安装的。

   \n
\n

3. 安装是通过应用程序实例的mount()方法完成的。

   \n
\n

\n

import { createApp } from \'vue\'\nimport App from \'./App.vue\'\nimport router from \'./router\'\nimport store from \'./store\'\n\n1\xef\xb8\x8f\xe2\x83\xa3\ncreateApp({\n    extends: App,\n    beforeCreate() { this.$store.commit(\'initialiseStore\') }\n  })\n  2\xef\xb8\x8f\xe2\x83\xa3\n  .use(router)\n  .use(store)\n  3\xef\xb8\x8f\xe2\x83\xa3\n  .mount(\'#app\')\n

\n

演示

\n

旁注：由于您要迁移到 Vue 3，Pinia现在是官方推荐的状态管理库，它取代了 Vuex（现已弃用）。请参阅Pinia 的迁移指南。

\n