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

Question

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

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

Answer 1

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

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

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

注意：在下面的示例中，我们在这里使用 extends: App 以便我们可以添加 beforeCreate() 挂钩。否则，我们可以简单地做 createApp(App) 来代替。
Vue 插件是通过应用程序实例的 use() 方法安装的。
安装是通过应用程序实例的 mount() 方法完成的。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

1️⃣
createApp({
    extends: App,
    beforeCreate() { this.$store.commit('initialiseStore') }
  })
  2️⃣
  .use(router)
  .use(store)
  3️⃣
  .mount('#app')

demo

旁注： 由于您要迁移到 Vue 3，Pinia is now the officially recommended state management library that replaces Vuex (now deprecated). See Pinia's migration guide.

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

vue 3 before create event in main.js

vue.js

vuejs3

vue-options-api