About @vue/compat, axios is introduced globally, axios.post cannot be accessed properly

[lqfxz520]

Version

3.2.20

Reproduction link

github.com

Steps to reproduce

npm run serve

What is expected?

In the App.vue file，log this.$axios.post is undefined

What is actually happening?

In the App.vue file，log this.$axios.post is valid

[posva]

If you check axios after importing it, you will see it's a function and that it doesn't have a post property. Vue is properly exposing the same thing.

---

Remember to use the forum or the Discord chat to ask questions!

[lqfxz520]

@posva When I comment out '@vue/compat', this.$axios has a post property，What accounts for this result?

import { defineConfig } from "vite";
import createVuePlugin from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    createVuePlugin({
      template: {
        compilerOptions: {
          compatConfig: {
            MODE: 2,
          },
        },
      },
    }),
  ],
  resolve: {
    alias: {
      // vue: "@vue/compat",
    },
  },
  server: {
    port: 8081,
  },
});

[LinusBorg]

Duplicate of #4403

[LinusBorg]

A short explanation: In Vue 2, we added global properties by extending the prototype. To mimic this with globalProperties, we bind functions provided as global properties to the component proxy instance. but calling fn.bind() creates a new function that is missing any additional properties that were defined on the original.

[LinusBorg]

Workaround/hack:

axios.bind = () => axios
app.config.globalProperties.$axios = axios

[lqfxz520]

A short explanation: In Vue 2, we added global properties by extending the prototype. To mimic this with globalProperties, we bind functions provided as global properties to the component proxy instance. but calling fn.bind() creates a new function that is missing any additional properties that were defined on the original.

Thank you for your help, I have been puzzled by this problem for a long time.Now it's time to happily continue playing