Как из vue.js выполнить скрипт Wordpress, чтобы vue.js отреагировал на результат?

Question

[Виталий]

Делаю плагин для wordpress, форма на однофайловом компоненте vue.js 2 (я еще не так силен в vue для продвинутого уровня, vuex npm и прочие сложности не разворачивал).

По замыслу пользователь на странице (сгенерированной vue) заполняет форму отзыва, после чего скрипт проверяет, залогинен ли пользователь в wordpress - и в зависимости от результата должен выполнять действия.
Результат сторона Wordpress возвращает в response, в зависимости от значения response['code'] и должен произойти выбор действий.

Итак, по кнопке Submit вызывается вот такой код (в секции methods компонента):

checkWPLogin () {
			let data = {
				action: 'is_wp_logged',
				security: ajax_php_vars.nonce,
			}
			$.ajax({
				method: 'get',
				url: ajax_php_vars.ajax_url,
				action: 'is_wp_logged',
				data: data,
				success: function(data) {
					response = data;
				},
				error: function(err) {
					console.log(err);
				}
			})
		},

Эта конструкция работает, но ожидаемо асинхронно. Причем пространство имен у нее, к сожалению, не совпадает с моим vue - то есть, когда я ставлю точку остановки на успешную ветку, на response= data; - переменные vue не видны - то есть я не могу ничего оттуда передать.

По сути мне не надо асинхронность, если есть вариант, как get и post запросы к wordpress сделать без ajax и асинхронности, я только ЗА.

Думал в сторону axios - вроде бы он более дружественен с vue.js, но не могу найти в документации, как указать не просто URL, но конкретный скрипт в коде (как для ajax у меня это указано в action). То есть для стороннего сервера все понятно, я знаю и как прочитать, и как отправить запросы.. но вот попасть внутрь кода на WP с помощью axios не знаю как.

Answer 1

[Виталий]

Собственно, данную конкретную задачу я решил.
Вот откорректированный код, который работает (как ни странно :) )

async checkWPLogin () {
			let data = {
				action: 'is_wp_logged',
				security: ajax_php_vars.nonce,
			}
			const { answer } = await $.ajax({
				method: 'get',
				url: ajax_php_vars.ajax_url,
				action: 'is_wp_logged',
				data: data,
				success: function(data) {
					response = JSON.parse(data);
				},
				error: function(err) {
					console.log(err);
				}
			});
			this.wp_user_status = Number( response['code'] )
			if ( this.wp_user_status != 200 ) {
				this.checkFBLogin()
			} else {
				this.fb_dialog_stage = 0
				this.addReview()
			}
		}

Answer 2

[Антон Шаманов]

импортируй в нужное пространство имен в чем проблема? зачем вообще тебе вызывать данный метод если он ничего кроме отправки запроса не делает? запрос ты и из своего компонента сделать можешь

Comments

[Виталий]

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

А вот про "импорт в нужное пространство имен" - тут можешь подробнее, или пруф какой?

[Антон Шаманов]

Виталий,

или пруф какой?

"доказательство" мог бы и сам нагуглить https://developer.mozilla.org/en-US/docs/Web/JavaS...
сам понимаешь, код я твой не видел и поэтому не факт что мой совет будет в тему.
по твоему решению: $.getJson() смотрелся бы логичнее.

[Виталий]

Антон Шаманов, знал бы ты, сколько я за эти дни нагуглил..... обычно на форумах прошу помощи уже в крайнем случае, когда мозг вскипел :)
спасибо за ссылку, сча глянем...а то там второй вопрос в этой же задаче на очереди, логин через FB, а он так просто не вскрылся. FB.api наглухо уходит в свое пространство

[Виталий]

Антон Шаманов, не, import это в данном случае не то.
Вот смотри, что я имел ввиду под "пространством имен" (возможно, сам термин использовал неверно):

getCurrentUserInfo() {
			let name = ''
			let email = ''
			FB.api('/me?fields=email,name,first_name,last_name,picture', function(userInfo) {
				name = userInfo.last_name + ' ' + userInfo.first_name
				email = userInfo.email
				console.log('Successful login for: ' + userInfo.name + '\ne-mail: ' + userInfo.email);
			})
			this.name = name
			this.email = email
		}

FB.api, как мы понимаем, асинхронная.
То есть сразу вызывая функцию getCurrentUserInfo() я имею name и email пустыми - они как присвоились пустыми вначале, так и сразу же перескочил на них.
А когда я попадаю внутрь конструкции FB.api - то там this уже не VueComponent, а Window - и, соответственно, присвоить значения this.name и this.email своего компонента я не могу.

[Антон Шаманов]

Виталий, мааалааадой человек, не хочу обидеть, скорее делюсь граблями - лучше потратить немного времени на изучение и прочитать до конца js мануал, чем потом мучиться по таким пустякам.

присвоить значения this.name и this.email своего компонента я не могу.

https://learn.javascript.ru/call-apply

[Антон Шаманов]

(function ($) {
    class Test {
        construct() {
            this.name = 1;
        }
        getCurrentUserInfo() {
            this.name = 2;
        }
    }
    let t = new Test();
    t.getCurrentUserInfo();
    console.log(t.name); // 2!
})(jQuery);

[Антон Шаманов]

FB.api, как мы понимаем, асинхронная.

мы этого не понимаем, ничто на это не указывает) js в этом плане заточен под асинхронность. в редких случаях кода нужен последовательный вызов или нельзя повесить обработчик, то используют Promise.