如何访问VueJS组件中的后缀实例？

Question

我有一个用files构建的电子/vue应用程序，但我无法解决如何访问在main.js中初始化的、在组件.vue文件中初始化的后缀实例。

src/renderer/main.js文件包含通常的导入：

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'

import { Sequelize } from 'sequelize'
import mysql2 from 'mysql2'

// create sequelize instance as normal
let db = new Sequelize(
  'database', 'user', 'password', {
    host: '1.2.3.4',
    dialect: 'mysql',
    dialectModule: mysql2
})

new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

现在，在src/renderer/components/Settings.vue文件中，我希望能够进行数据库调用，例如：

<template>
...
  <button @click="testDatabaseConnection()">Test Database</button>
...
</template>

<script>
export default {
    name: 'Settings',
    methods: {
        navigate(route) {
            this.$router.push(route);
        },

        testDatabaseConnection() {
            // access the Sequelize instance
        }
    }
}
</script>

我在正确/错误的地方做这件事吗？如何将db变量放入Vue组件可以访问的作用域？这里有什么我应该读的最佳实践吗？

Answer 1

您可以通过使用组件import文件中的import关键字来.vue Javascript文件/vars/.vue对象。

例如：

Settings.vue

<template>
 ...
</template>

<script>
import db from '../../database/connection'

export default {
    name: 'Settings',
    methods: {
        async testDbConnection() {
            // Can access the db object from the import statement
            let result = await db.sequelize.query(...)
        },

</script>