How to execute a Wordpress script from vue.js so that vue.js reacts to the result?

Question

AJAX

I'm making a plugin for wordpress, a form on a single-file component vue.js 2 (I'm not so strong in vue for an advanced level yet, I haven't deployed vuex npm and other complexities).

By design, the user on the page (generated by vue) fills out a feedback form, after which the script checks if the user is logged into wordpress - and, depending on the result, should perform actions.
The result of the Wordpress side returns in response, depending on the value of response['code'] and a choice of actions should occur.

So, the following code is called on the Submit button (in the methods section of the component):

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);
        }
      })
    },

This construct works, but is expected to be asynchronous. Moreover, its namespace, unfortunately, does not match my vue - that is, when I put a breakpoint on a successful branch, on response= data; - vue variables are not visible - i.e. I can't pass anything from there.

In fact, I don’t need asynchrony, if there is an option how to make get and post requests to wordpress without ajax and asynchrony, I’m only FOR it.

I thought in the direction of axios - it seems to be more friendly with vue.js, but I can’t find in the documentation how to specify not just a URL, but a specific script in the code (as for ajax, I have this in action). That is, everything is clear for a third-party server, I know how to read and how to send requests .. but I don’t know how to get inside the WP code using axios.

Answer 1

Actually, I solved this particular problem.
Here is the corrected code that works (oddly enough :) )

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

import to the correct namespace, what's the problem? why do you need to call this method if it does nothing but send a request? you can make a request from your component