How to effectively utilize axios within Vue.js JavaScript files

After importing axios to the main.js and setting it as shown below:

Vue.prototype.$http = axios;

I no longer need to import axios for every component. Now I can simply reference axios in my vue components like this:

this.$http
      .post(`/public/api/login`)
      .then(response => {
        console.log("ddddddddd",response);
      })
      .catch(error => {
        console.log("Error is", error);
      });
  }

However, when attempting to use it within my store.js file, I encounter an issue.

Cannot read property '$http' of undefined

This could be due to the fact that store.js is a JavaScript file rather than a Vue file. So, my question now is how can I access axios in my store.js file?

Answer №1

Make sure to include axios in your main store file and then assign it to the Vuex prototype like this: Vuex.prototype.$http = axios;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript : Retrieve attributes from a JSON object

Situation : I have a JSON object with multiple properties and need to send only selected properties as a JSON string to the server. Approach : To exclude certain properties from the JSON string, I utilized the Object.defineProperty() method to set enumera ...

Node.js seems to be having trouble with emitting events and catching them

I'm having trouble troubleshooting my code. // emitter.js var EventEmitter = require('events').EventEmitter; var util = require('util'); function Loadfun(param1, param2, db){ function __error(error, row){ if(error){ ...

Tips for passing an id to a modal window component

I am currently working with Vue and Ionic, but I am unsure how to pass the lesson.id to the openModal() method. Here's the scenario: I have a card containing lesson data, including comments. When a user clicks on the comments, a modal window opens. I ...

What's the best way to retrieve the id or index of a card within a list?

Struggling to fetch the id's of documents retrieved from a MongoDB database and displayed on React and Material-Ui cards. Tried logging id in functions and APIs, but receiving 'undefined' or metadata from the delete function. Delete functi ...

The functionality of jQuery touch events on iOS devices is not functioning properly

I'm encountering issues with jQuery touch events on iOS devices. Here is my current script: $(document).ready(function(){ var iX = 0,iY = 0,fX = 0,fY = 0; document.addEventListener('touchstart', function(e) { ...

ajax always returns the same value, even when the input value is different

Each time I click on a different value, the console.log keeps giving me the same value. view image description I have checked the HTML code and found that even though each value attribute is different, it still returns the first value of the attribute. vi ...

Troubleshooting problems with manipulating arrays within JSON using the map function

I'm currently working on a project to create a Pokemon wiki-style webpage as a beginner project. I'm trying to display the types of each Pokemon using the JSON object retrieved via axios. However, I'm encountering issues with using the map m ...

Verify whether an array is devoid of any elements, and prevent any pop-up from appearing if this condition is met

I am working on a map that displays 3 countries, each with a popup containing links and their respective names when clicked. However, I want to avoid showing the popup for countries that do not have any information in the "link" or "linkName" fields. Can ...

Encountering a 400 error when attempting to send data to MongoDB Realm

I'm currently attempting to send user data to my API from my application using the following code snippet: const submitPet = (e) => { e.preventDefault(); let data = { pet: petName, breed: petBreed, image: petImage, desc: ...

A guide on effortlessly importing index.vue files in Vue 3 and Vite without needing to specify the file name

Recently, I've started working on a Vue 3 application with vite and I'm looking to reorganize the directories to group components and their sub-components in folders. Currently, I am using /path/to/MyComponent/index.vue for importing the main co ...

transmit a JavaScript variable from JavaScript to a Vue.js component

I am facing an issue with passing a custom javascript object to my Vue component. Although I can easily create and pass JSON data from PHP, defining a JavaScript object and sending it to the component is proving to be challenging. In my .blade.php file, I ...

Runtime.UnhandledPromiseRejection - Oops! Looks like we're trying to read properties of something that doesn't exist (specifically 'headers')

I'm facing an unexpected error that has left me puzzled. Let me walk you through what I am trying to accomplish: The task at hand involves fetching data from one API and then transmitting it to another. This process is executed as a background-funct ...

Updates to data in Vue script are not being mirrored in the browser display

I have been working with Vue.js and I thought I understood the basics, but now I am facing some issues that suggest otherwise. Could someone please help me understand what is going wrong here? <div id="breakingnews"> <form class="pure-for ...

Place the image on the canvas

I currently have a canvas where I am able to add text layers and images from flickr. My goal is to enable users to upload an image to the canvas using the html input. For uploading images from flickr, I am using this code: $(".search form.image-search"). ...

Using selenium webdriver is not equivalent to using the full functionality

Here is the code snippet I am working with: const mainScreen = electron.screen.getPrimaryDisplay(); const windowHeight = mainScreen.size.height; const windowWidth = mainScreen.size.width; driver.manage().window().setRect({width: windowWidth, height: wind ...

Steps for displaying a loading image during the rendering of a drop-down list (but not during data loading):

Using jQuery's autocomplete combobox with a large dataset of around 1,000 items. The data loads smoothly from the server, but there is a delay when expanding the drop-down list to render on screen. Is there a way to capture the initial click event on ...

What is the best way to initiate a function upon each page load?

(Apologies in advance for any English mistakes) Hello everyone, I am currently developing a simple Chrome extension to edit certain graphics and text fields on a website (Freshdesk) that cannot be modified directly on the site due to proprietary code. ...

How can you determine the HTML element where a mouse click took place?

Is it possible in JavaScript to identify the HTML element where a mouse click occurs without having an event listener attached to the elements? Essentially, I want to be able to capture the mouse click event and determine the specific element on the page ...

What is the best way to utilize JSONP to display an entire HTML code with an alert?

When I attempt to use cross-domain ajax to retrieve the entire HTML page code, I keep receiving a failed message. The console log shows: "Uncaught SyntaxError: Unexpected token <" Below is my AJAX function: function fetchData(){ var url = documen ...

Enabling Cross-Origin Resource Sharing (CORS) with Javascript on the client side during

Currently, I am attempting to incorporate another website's login verification system into my own site. Although the code below is successfully retrieving the correct response ID, I am encountering CORS errors preventing the completion of the login pr ...