gitakachan / vue-project-collections-and-issues

vue issues
0 stars 0 forks source link

vue-axios 基本寫法 #8

Open gitakachan opened 3 years ago

gitakachan commented 3 years ago

擷取自 vue-axios: https://www.npmjs.com/package/vue-axios

npm install --save axios vue-axios
//main.js 引入
import axios from "axios";
import VueAxios from "vue-axios";

const app = createApp(App);
app.use(VueAxios, axios);
app.use(router);
app.mount("#app");

in Vue 2

This wrapper bind axios to Vue or this if you're using single file component.

You can use axios like this:

//組件內部使用
Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

in Vue 3

This wrapper bind axios to app instance or this if you're using single file component.

in option API, you can use axios like this:

//組件內部使用
// App.vue
export default {
  name: 'App',
  methods: {
    getList() {
      this.axios.get(api).then((response) => {
        console.log(response.data)
      })
      // or
      this.$http.get(api).then((response) => {
        console.log(response.data)
      })
    }
  }
}