Получить доступ к глобальному объекту Vue из другого js-файла

Question

Имеется проект на Quasar (VueJS) с использованием Axios. В boot.js происходит инициализация axios

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

Vue.prototype.$axios = axios

Затем я пытаюсь использовать этот объект в другом файле проекта mutations.js

export function getVendors (state) {
    this.$axios.post('/get_vendors.php')
        .then(response => { console.log(response) })
}

и получаю ошибку

"TypeError: Cannot read property 'post' of undefined"

Пробую сделать через стрелочные функции

const getVendors = (state) => {
...
export { getVendors }

и ошибка следующая

"TypeError: Cannot read property '$axios' of undefined"

Очевидно, что содержание в объекте this в разных случаях своё, отличное от глобального объекта приложения. Как получить доступ к глобальному объекту Vue ?

Answer 1

Необходимо добавить

import Vue from 'vue'

в начало файла mutations.js и использовать Vue.prototype вместо this

import Vue from 'vue'

export function getVendors (state) {
  Vue.prototype.$axios.post('/get_vendors.php')

Это помогло. Но существует ли более правильный вариант ?

Answer 2

Иногда вы хотите получить доступ к данным, которые вы настраиваете в своем загрузочном файле (boot file), в файлах, где у вас нет доступа к корневому экземпляру Vue.

К счастью, поскольку загрузочные файлы (boot files) являются просто обычными файлами JavaScript, вы можете добавить столько именованных экспортов в свой загрузочный файл, сколько захотите. Давайте возьмем пример Axios. Иногда вы хотите получить доступ к своему экземпляру Axios внутри файлов JavaScript, но не можете получить доступ к корневому экземпляру Vue. Чтобы решить эту проблему, вы можете экспортировать экземпляр Axios в свой загрузочный файл и импортировать его в другое место.

Пример boot file для Axios:

// axios boot file (src/boot/axios.js)

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

// Мы создаем наш собственный экземпляр axios и устанавливаем собственный базовый URL
// Обратите внимание, что если бы мы не установили здесь никакой конфигурации, нам не нужно использовать
// именованный экспорт, так как мы могли бы просто `import axios из 'axios'`
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
})

// для использования внутри файлов Vue через this.$axios
Vue.prototype.$axios = axiosInstance

// Здесь мы определяем именованный экспорт
// чтобы мы могли позже использовать axios внутри .js файлов:
export { axiosInstance }

В любом файле JavaScript вы сможете импортировать экземпляр axios следующим образом.

import { axiosInstance } from 'boot/axios'

Больше информации по ссылке - Quasar boot files: Доступ к данным из загрузочных файлов

БЛОГ НА HUSL

Получить доступ к глобальному объекту Vue из другого js-файла

Ответы (2 шт):