时间戳

首页 > 解决方案 > 如何访问 VueJS 组件中的 Sequelize 实例？

javascript - 如何访问 VueJS 组件中的 Sequelize 实例？

问题描述

.vue我有一个用 electron-vue 构建的 Electron/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 组件可以访问的范围内？这里有什么我应该阅读的最佳实践吗？

标签： javascriptnode.jsvue.jselectronsequelize.js

解决方案

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

例如：

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

推荐阅读