I installed axios using the npm install axios
command this is my package.json
dependencies
"dependencies": {
"axios": "^0.18.0",
"bootstrap-vue": "^2.0.0-rc.11",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
I registered the axios in my main.js
file.
import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import axios from 'axios'
import App from './App'
import routerList from './routes'
Vue.use(axios)
Vue.use(BootstrapVue)
Vue.use(VueRouter)
When I tried to use axios in one of my components I get this error:
Uncaught ReferenceError: axios is not defined
How to fix this?
Vue.use
means adding plugins. However, axios
is not a plugin for Vue
, so you can not add it globally via use
.
My recommendation is importing axios
only when you need it. But if you really need to access it globally, you may like to add it to prototype.
Vue.prototype.$axios = axios
Then you can access axios
in vue using this.$axios
In main.js
, add this line instead of import axios from 'axios'
window.axios = require('axios');
And remove
Vue.use(axios)
Using window
is generally considered a bad practice, so you better use axios
the following way:
Create a folder named plugins
inside of your src
directory.
Then, create axios.js
file inside that directory. We will put all our axios logic here and use axios as a Vue plugin.
Add the following:
import ax from 'axios'
// insert all your axios logic here
export const axios = ax
export default {
install (Vue, options) {
Vue.prototype.$axios = ax
}
}
src/main.js
, add the following:import Vue from 'vue' // You can skip this line
import VueAxios from './plugins/axios'
Vue.use(VueAxios)
Now, you can use axios as this.$axios
in your components. So something like this.$axios.get()
.
Therefore, you can import axios with the following line:
import { axios } from '@/plugins/axios'
Now, you can use axios
directly in your store.
Or you can also use it as Vuex plugin:
import { axios } from '@/plugins/axios'
const axiosPlugin = store => {
store.$axios = axios
}
new Vuex.Store({
...,
plugins: [axiosPlugin]
})
Now, you can use it as this.$axios
in Vuex.
Use following command to install axios
npm install axios --save
After executing above command import like mentioned below:
import axios from 'axios'
Also install vue-axios
and import in main.js
import VueAxios from 'vue-axios'
Then in main.js
:
Vue.use(VueAxios, axios)
Now if I am not mistaken in your methods you can use for example:
let uri = 'http://localhost:4000/tickets/add';
this.axios.post(uri, this.ticket).then((response) => {
console.log(response);
});
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios;
then inside your component you can start using axios like this:
{
methods: {
someMethod() {
this.$http.get('/users').then(() => {
// do something
})
}
}
}
包括这一行:
import {AxiosInstance as axios} from "axios";
i found in laravel project window.axios = require('axios');
when i insert it in myproject. that all be fine!
To use in Vue Components , install both Vue Axios and Axios packages
npm install --save axios vue-axios
In your main.js file, add the following:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
With the above solution, I never had an issue using axios in my Vue components with this
keyword till now.
Custom Javascript File
However, I had faced issues using Axios in a custom JS file with axios not defined error.
Following worked for me in a custom JS file:
const axios = require("axios");
Usage example:
export default {
fetchProducts() {
return axios.get(`${ROOT_URL}/products`);
},
};
Try this codes:
import axios from 'axios'
Vue.use(axios)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.