ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Почему не добавляется новое свойство экземпляра vue?

Уже всё испробовал - после создания инстанса vue, инстанс плагина под объявленным свойством не подрубается. По итогу я не могу аяксить из контекста. Добавление свойства экземпляра не работает без каких-либо видимых на то причин, пробовал уже и в хвост, и в гриву!

Код плагина:
import axios from 'axios'
class Ajax {
  constructor () {
    console.log('ok')
    this.baseURL = 'http://localhost:3000/'
    this.token = ''
    const token = localStorage.getItem('token')
    if (token && token.length) this.setToken(token)
  }

  setToken (value = '') {
    this.token = value
  }

  get (url, params, onSuccess, onError, onFinish) {
    axios({
      baseURL: this.baseURL,
      url,
      method: 'GET',
      data: params,
      headers: { token: this.token }
    }).then((resp) => {
      if (typeof onSuccess === 'function') onSuccess(resp)
    }).catch(error => {
      if (typeof onError === 'function') onError(error)
    }).finally(() => {
      if (typeof onFinish === 'function') onFinish()
    })
  }

  post (url, params, onSuccess, onError, onFinish) {
    axios({
      baseURL: this.baseURL,
      url,
      method: 'POST',
      data: params,
      headers: { token: this.token }
    }).then((resp) => {
      if (typeof onSuccess === 'function') onSuccess(resp)
    }).catch(error => {
      if (typeof onError === 'function') onError(error)
    }).finally(() => {
      if (typeof onFinish === 'function') onFinish()
    })
  }
}
export default {
  install (Vue, options) {
    console.log('Installing the plugin!')
    Vue.$ajax = function () {
      return new Ajax()
    }
    // Object.defineProperty(Vue, '$ajax', new Ajax())
  }
}

Точка входа:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import i18n from './utilities/i18n'
import ajax from './utilities/ajax'
import locale from 'element-ui/lib/locale/lang/ru-RU'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/fonts.scss'
import './assets/tailwind.css'
Vue.config.productionTip = false
Vue.use(ajax)
Vue.use(ElementUI, { locale })

const app = new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

store.$app = app

console.log(app)
  • Вопрос задан
  • 149 просмотров
Решения вопроса 1
yarkov
@yarkov Куратор тега Vue.js
Проект "Жизнь после смерти" - lifeafterdeath.ru
А это что за жесть?
Vue.prototype.$ajax = function () {
      return new Ajax()
}

Почему не так?
Vue.prototype.$ajax = new Ajax();
Зачем функция?
Я, например, так делаю и всё всегда работает:
https://github.com/yarkovaleksei/vue2-storage/blob...
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега Vue.js
Vue.$ajax = function () {

Vue.prototype.$ajax = function() {
Ответ написан
ShadowOfCasper
@ShadowOfCasper Автор вопроса
Middle User Interface Web Developer
ещё и тип вопроса со сложный на простой переделал, я охреневаю. Ему говоришь - не работает ни через свойство, ни через прототип - он глаза замылил и продолжает бред нести. Вью - блестящий фрейм, а комьюнити ну просто отвратительно. Реакт - ужасная либа, а комьюнити - настоящие душки. Интересная градация

Короче пока найден только один путь решения проблемы - он костыльный. По докам установка инстанса своего класса как вью плагина НЕ РАБОТАЕТ НИ ЧЕРЕЗ СВОЙСТВО, НИ ЧЕРЕЗ ПРОТОТИП

Работает только объявление свойства ПОСЛЕ создания инстанса приложения
const app = new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')
// вместо vue use ajax, где ajax - объект с install, в котором объявляется новое св-во / прототип
app.$ajax = new Ajax()
store.$app = app
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы