如何在 VueJS 组件中访问 Sequelize 实例?

Question

我有一个使用 electron-vue 构建的 Electron/Vue 应用程序，但我无法弄清楚如何访问在组件.vue文件中在 main.js 中初始化的 Sequelize 实例。

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

您可以使用组件 .vue 文件中的import关键字importJavascript 文件/vars/objects。

例如：

设置.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>