globalProperties 上的 Vue3 反应式组件

Question

在 vuejs 2 中，可以将组件分配给主应用程序实例上的全局变量，如下所示......

const app = new Vue({});

Vue.use({
  install(Vue) {
    Vue.prototype.$counter = new Vue({
      data: () => ({ value: 1 }),
      methods: {
        increment() { this.value++ },
      }
    });
  }
})

app.$mount('#app');

但是当我将其转换为 vue3 时，我无法访问任何属性或方法......

const app = Vue.createApp({});

app.use({
  install(app) {
    app.config.globalProperties.$counter = Vue.createApp({
      data: () => ({ value: 1 }),
      methods: {
        increment() { this.value++ }
      }
    });
  }
})

app.mount('#app');

这是 vue2 的示例... https://jsfiddle.net/Lg49anzh/

这是 vue3 版本... https://jsfiddle.net/Lathvj29/

所以我想知道在 vue3 中这是否仍然可能以及如何实现，或者我是否需要重构我的所有插件？

我试图让示例尽可能简单来说明问题，但如果您需要更多信息，请告诉我。

Answer 1

Vue.createApp()创建一个应用程序实例，该实例与应用程序的根组件分开。

快速修复是mount应用程序实例获取根组件：

import { createApp } from 'vue';

app.config.globalProperties.$counter = createApp({
  data: () => ({ value: 1 }),
  methods: {
    increment() { this.value++ }
  }
}).mount(document.createElement('div')); 

演示1

然而，更惯用和更简单的解决方案是使用ref：

import { ref } from 'vue';

const counter = ref(1);
app.config.globalProperties.$counter = {
  value: counter,
  increment() { counter.value++ }
};

演示2