具有组合 API 不同对象结构的 Vue 3 在开发构建或生产构建中使用 Vue-CLI 4 获得 context/globalProperties？

Question

为什么 getCurrentInstance() 结果的对象结构与组合 API 在开发或生产构建中不同？

---

我使用以下模式将全局变量添加到我的 Vue 实例：

    export default {
      install(app) {
        const _projectFile = new ProjectFile(app);
    
        //* This will help for accessing the store in other files (plugins)
        app.config.globalProperties.$projectProperties = _projectFile;
    
        //* This will expose the store in components with this.$store
        app.provide('$projectProperties', _projectFile);
      }
    };

---

我在我的 main.js 中启动这个，还有一些其他的东西（这一切都很好）。

    import App from './App.vue'; // Main Vue component
    const app = createApp(App)
    .use(projectProperties);
    app.mount('#app');

---

真正的怪事从这里开始。。当尝试从 ./App.vue 中的 setup() (Compostion API) 访问我的 globalProperties 时。当 运行:

时，我得到 getCurrentInstance() 的不同对象结构

1. vue-cli-service serve（发展）
2. vue-cli-service build（生产）

---

./App.vue

  setup() {
    const _instance = getCurrentInstance();

    onMounted(async function() {
      // This one is only valid from vue-cli-service serve
      const { $store, $router, $projectProperties } = _instance.ctx;

      // This will work for both vue-cli-service serve & build
      const { $store, $router, $projectProperties } = _instance.appContext.app.config.globalProperties;

      // Other non relevant code down here

    });
  },

所以这在我的生产版本中不起作用： const { $store, $router, $projectProperties } = _instance.ctx;

我不明白为什么 getCurrentInstance().ctx 指向带有 cli-service serve 的 globalProperties 对象，但不包含 cli-service build 中的 globalProperties ?

Answer 1

结果ctx is intended for development mode only. ctx exposes the global properties for easier console inspection。

如果您在开发和生产模式下都需要全局属性，则需要坚持使用 _instance.appContext.app.config.globalProperties。