globalProperties上的Vue3反应组件

Question

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

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()创建一个application instance，它独立于root component of the application。

一种快速的解决方法是对应用程序实例执行mount操作，以获取根组件：

import { createApp } from 'vue';

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

demo 1

但是，一种更常用、更简单的解决方案是使用ref

import { ref } from 'vue';

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

demo 2

Answer 2

不是这个问题的确切答案，但有关联。这里有一个在组件之间共享全局变量的简单方法。

在我的主应用程序文件中，我将变量$navigationProps添加到全局滚动中：

let app=createApp(App)
app.config.globalProperties.$navigationProps = {mobileMenuClosed: false, closeIconHidden:false };
app.use(router)
app.mount('#app')

然后在我需要该$navigationProps使用双向绑定的任何组件中：

<script>
import { defineComponent, getCurrentInstance } from "vue";

export default defineComponent({
  data: () => ({
    navigationProps:
      getCurrentInstance().appContext.config.globalProperties.$navigationProps,
  }),
  methods: {
    toggleMobileMenu(event) {
      this.navigationProps.mobileMenuClosed =
        !this.navigationProps.mobileMenuClosed;
    },

    hideMobileMenu(event) {
      this.navigationProps.mobileMenuClosed = true;
    },
  },

对我来说很有吸引力。