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

Question

[Никита Кит]

Уже всё испробовал - после создания инстанса 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)

Answer 1

[Алексей Ярков]

А это что за жесть?

Vue.prototype.$ajax = function () {
      return new Ajax()
}

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

Comments

[Никита Кит]

потому что так, как ты написал - я пробовал изначально и это не сработало

[Никита Кит]

Сделал как в твоём репозитории 1 в 1 и сработало =D

export default {
  install (Vue, options) {
    const instance = new Ajax()
    Vue.$ajax = instance
    Vue.prototype.$ajax = instance
  }
}

И кое-в чём 0xD34F был прав - в свойста инстанса плагин почему-то не упал - смотреть нужно было в прототип, хотя когда я в последний раз писал на вью в 18м году, вроде 2.3.16 если я не ошибаюсь - плагины дружно всем скопом шли в свойства

[Алексей Ярков]

Никита Кит, го пример на codesandbox ))
Я даже комп включу пойду. Ну должно 100% работать.

[Алексей Ярков]

Никита Кит, ну вот )) Поздравляю))

[Никита Кит]

Алексей Ярков, ну мне теперь чисто академически интересно, почему с анон функцией это не заработало. Она ведь всё равно должна была исполниться и вернуть инстанс аякса, хоть ты сорок раз колбэкни - результат то отличаться не должен. В чём секрет такого поведения?

[Алексей Ярков]

Никита Кит, чего ради она исполняться должна была? )) Если бы вызывалось vue.$ajax(), то да, возвращался бы экземпляр класса, каждый раз новый судя по всему.

Answer 2

[0xD34F]

Vue.$ajax = function () {

Vue.prototype.$ajax = function() {

Comments

[Никита Кит]

Не работает. И через defineProperty не работает

[0xD34F]

Никита Кит, работает. Если использовать правильно. А как вы пытаетесь использовать - понятия не имею, вы же этого не показали.

[Никита Кит]

Работает, если объявить свойство после создания инстанса приложение, а из плагина экспортировать класс вместо инстанса плагина.

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

Но это быдлокод, меня такое не устраивает

[0xD34F]

Никита Кит, работает, если добавить свойство в прототип. А потом не заниматься ерундой. Чем занимаетесь вы, мне, повторяю, неизвестно.

[Никита Кит]

0xD34F, вообще-то показал. В main.js в конце файла лог инстанса приложения. Там должен быть $ajax в свойствах / прототипе (смотря куда положил), но его нет

[Никита Кит]

0xD34F, естественно, если ты знаешь javascript, то должен понимать, что дальнейшие попытки вызова методов инстанса класса аякса приведут к ошибкам, откуда бы я его ни вызывал - это не важно

[Никита Кит]

0xD34F, да кидал я его в прототип, вот, наглядно:
точка входа

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')
// app.$ajax = new Ajax()
store.$app = app

console.log(app)

Плагин

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.prototype.$ajax = function () {
      return new Ajax()
    }
    // Object.defineProperty(Vue, '$ajax', new Ajax())
  }
}

// export default Ajax

НЕ РАБОТАЕТ ДАЖЕ ЧЕРЕЗ ПРОТОТИП!
Будь всё так просто я бы не задавал тупых вопросов
Как будто я просто так выбрал тип вопроса сложный, и ни разу до этого плагин не создавал. Хватит меня за идиота держать. Не знаешь ответ - иди по своим делам

[Никита Кит]

0xD34F, кроме того, открой документацию, работать должно и через свойство, и через прототип

[0xD34F]

Никита Кит, не работает ЧТО? Вы так и не показали, как пытаетесь этот $ajax использовать.

[Никита Кит]

0xD34F, объявленное свойство, естественно, ты заголовок вопроса прочитай - добавление свойства не работает, ты меня троллишь что ли???

Найди тут объявленный $ajax в свойствах / прототипе
Я уже чтоб объяснить тебе проблему 3й раз код откатываю с рабочего костыля

[0xD34F]

Никита Кит, а зачем искать там, где его нет? Если добавлять в прототип - должен быть в __proto__ (эту часть вы почему-то не стали показывать). Если делать то, что вы пытались изначально - тем более тут бессмысленно смотреть, потому что добавляли вы свойство конструктору, а смотрите экземпляр (вы вообще как, разницу между ними понимаете?).

[Никита Кит]

0xD34F, да ты сам не понимаешь что несёшь, судо моё - конструктор - это функция. Как ты к функции добавишь свойство? Ты вообще хоть знаешь как install работает??? Установленный плагин должен появиться именно в том скрине, что я скинул - там где $i18n, $moment, $router - ЭТО ВСЁ ТАКИЕ ЖЕ ПЛАГИНЫ!
Иди в школу, js учи - затрахал уже всю голову. И какой дибил тебя куратором тэга сделал

[0xD34F]

Никита Кит, может, вам обратиться на фриланс? Там ваши истерики и некомпетентность найдут больше понимания - деньги есть деньги.

[Никита Кит]

0xD34F, очень конструктивный ответ. Может тебе с ним обратиться на...? Он доказывает твою обширную компетентность в javascript. Объясняю в последний раз, для самых маленьких. Vue - функция, как и jQuery (к примеру). Любой конструктор - функция. Объявить функции свойство нельзя. Свойство можно объявить объекту. Но у функции есть прототип, который и является объектом. Именно этот прототип и включает в себя сущности фреймворка типа component, directive, mixin и всё остальное, включая метод use. Он регистрирует в массив плагинов новый объект с install. Во время инициализации приложения все зарегистрированные объекты с install исполняются, в результате чего у прототипа инстанса выполненного конструктора появляются новые свойства.
Это тебе маленький ликбез.
В моей ситуации install исполнился, но не сработало добавление нового свойства в прототип, ни через приравнивание, ни через defineProperty. Срабатывать оно должно по документации в любом случае, объявляешь ты его как свойство Vue.prop или как Vue.prototype.prop - разницы нет. Оно так или иначе должно объявиться как свойство прототипа конструктора.

[0xD34F]

Никита Кит, ну и как это, не знать основ js? Функция - тоже объект и может иметь (и имеет) свойства.

Добавление нового свойства в прототип выполнилось как надо, а то что вы этого не видите - так это потому что не туда смотрите.

Вместо того, чтобы продемонстрировать, как вы пытаетесь этот свой $ajax использовать, чтобы можно было указать, где вы косячите, вы потратили час на скулёж о том, как у вас ничего не работает. Не стыдно?

[Никита Кит]

0xD34F, сам ты основ не знаешь. Выведи typeof Vue и вааау - это функция. Если судить в таком ключе, то объект вообще всё! У всего же есть прототип - значит объекты. Охеренная логика. Типы данных? Неее, не слышали.
Мог бы взять нормально сказать - неправильно дебажишь - разверни proto и смотри в него. $ajax должен быть там. А ты начал плеваться ядом тупо сходу, выводя меня из себя
"работает, если добавить свойство в прототип. А потом не заниматься ерундой. Чем занимаетесь вы, мне, повторяю, неизвестно."
Стыдно за это говно должно быть тебе

[Никита Кит]

0xD34F, в любом случае твой ответ оказался не верным, проблема заключалась в оборачивании вызова в анон функцию - Алексей Ярков мне на этот косяк указал сразу, а ты нет. Он - хороший куратор тэга, а ты - нет!

[0xD34F]

Никита Кит,

Выведи typeof Vue и вааау - это функция.

П-ф-ф-ф, посмотрите Vue instanceof Object - увидите true. Не о том говорите, вы пытались утверждать, будто функциям свойства не добавить, напоминаю, как это было:

конструктор - это функция. Как ты к функции добавишь свойство?

Да вот так:

function F(){}
F.свойствоФункции = () => alert('Учите JS.');
F.свойствоФункции();

Ну и кто из нас основ не знает? Явно не я.

Мог бы взять нормально сказать - неправильно дебажишь - разверни proto и смотри в него

Так и сказал, где искать, напоминаю, как это было:

Если добавлять в прототип - должен быть в __proto__

Но вы, очевидно, были слишком заняты своей истерикой, чтобы попытаться обратить внимание на мои слова, не говоря уже том, чтобы понять их смысл.

[0xD34F]

Никита Кит,

в любом случае твой ответ оказался не верным

Верным. Сколько информации вы сообщили - настолько я и ответил. Предложил вам сообщить ещё. Вы вместо этого истерику устроили. Сами себе злобный буратино.

проблема заключалась в оборачивании вызова в анон функцию

Сама по себе обёртка из анонимной функции не создавала проблем (другой вопрос - зачем вам такое могло быть нужно?). А вот ваше непонимание, как такой штукой правильно пользоваться - очень даже.

[Никита Кит]

0xD34F, да ты технически прав - вообще любая функция является объектом, неважно класс это, или обычная функция. Но ты продолжаешь эскалировать конфликт и упорно провоцировать меня на хейт. Бить в грудь и утверждать что эта запись

Vue.prototype.$ajax = function () {
      return new Ajax()
    }

Работает...
Ты до сих пор так считаешь - следовательно даже проверить не удосужился, наверно думаешь я правильный ответ отдал другому куратору просто тебе назло, а не потому что после его ответа проблема иссякла, а после твоего - иссякло лишь моё терпение

[0xD34F]

Никита Кит, да, работает. Просто вы, в силу своей низкой квалификации, неспособны правильно воспользоваться такой функцией. А я могу (как, кстати, и любой хоть сколько-нибудь вменяемый программист, владеющий js... да даже не обязательно js, настолько тут всё тривиально).

даже проверить не удосужился

Во-первых - тут проверять нечего, всё очевидно (да-да, не для формошлёпа - это я уже понял).

Во-вторых - а что конкретно проверять-то? Вы до сих пор скрываете код, где ваш $ajax используется, несмотря на то, что я уже пять раз (этот шестой) обращал на это ваше внимание. Может, хоть сейчас покажете? - я его заставлю работать (а вы, соответственно, своими словами про "не работает" подавитесь), и для этого мне понадобиться лишь добавить круглые скобки (вот это для вас будет открытие, что функции - их, оказывается, вызывать надо).

Answer 3

[Никита Кит]

ещё и тип вопроса со сложный на простой переделал, я охреневаю. Ему говоришь - не работает ни через свойство, ни через прототип - он глаза замылил и продолжает бред нести. Вью - блестящий фрейм, а комьюнити ну просто отвратительно. Реакт - ужасная либа, а комьюнити - настоящие душки. Интересная градация

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

Работает только объявление свойства ПОСЛЕ создания инстанса приложения

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

Comments

[Михаил]

[Михаил]

Но я как профессионал со 100 летним опытом во vue могу сказать то сам плагин это костыль

[Никита Кит]

Михаил, я очень надеюсь, что не отхвачу никаких сайд-эффектов с этого костыля) Ну страшно такое творить конечно

[Михаил]

Никита Кит, Ну вот vue-router который у вас, делает через прототип
https://github.com/vuejs/vue-router/blob/dev/src/i...

я тоже плагины делал через прототип, и всё прекрасно работало, вопрос в том как и где вы это используете

А лучше вообще выкиньте эту простыню текста

[Никита Кит]

Михаил Ну вообщем как сайд-эффект, инстанс не падает в экземпляры VueComponent - это было ожидаемо.
Но там он мне и не нужен - в экшенах модулей сторов всё заработало =D

[Михаил]

Никита Кит, а вот это вообще прекрасно, переводить промисы обратно в колбэки, может ещё нам 2007 вернёте?

}).then((resp) => {
  if (typeof onSuccess === 'function') onSuccess(resp)
}).catch(error => {
  if (typeof onError === 'function') onError(error)
}).finally(() => {
  if (typeof onFinish === 'function') onFinish()
})

[Никита Кит]

Михаил, ну это уже оффтоп и вкусовщина) Да, я импользую промисы только там, где они реально нужны - на бэке. И то через async / await. А на фронте оставляю колбэки, просто потому что мне так удобнее воспринимать код - привычки из 2007го =D