Как получить доступ к экземпляру Sequelize в VueJS компоненте? - PullRequest
Новая
       23

Как получить доступ к экземпляру Sequelize в VueJS компоненте?

0 голосов
/ 17 февраля 2020

У меня есть приложение Electron / Vue, созданное с помощью electronic- vue, но я не могу понять, как получить доступ к экземпляру Sequelize, который инициализируется в main. js, в компоненте .vue files.

Файл 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 может получить доступ? Есть ли здесь лучшие практики, о которых мне следует прочитать?

1 Ответ

0 голосов
/ 20 февраля 2020

Вы можете import Javascript файлы / переменные / объекты, используя ключевое слово import в компоненте. vue файл.

Например:

Настройки. 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>
...