Vue 3 全局属性在已安装或计算中不可见

Question

我在 main.js 中设置了一个属性：

app.config.globalProperties.$backendUrl  = "https://myhost:8989";

然后在组件中获取它时，我得到以下情况：

  methods: {
     save() {
        console.log(this.$backendUrl); //outputs CORRECT result
     }
  },

  mounted() {
     console.log(this.$backendUrl); //outputs undefined
  },

  computed: {
     treeData(){
        console.log(this.$backendUrl); //outputs undefined
     }
  }

怎么了？

Answer 1

app在main.js中是如何定义的？

也就是说，你不应该这样做：

// app is component instance
const app = createApp(App).use(router).mount("#app");

app.config.globalProperties.$backendUrl = "https://myhost:8989";

相反，你应该这样做：

// app is app instance
const app = createApp(App)
app.use(router).mount("#app");

app.config.globalProperties.$backendUrl = "https://myhost:8989";