globalProperties 上的 Vue3 反应式组件答案

【问题标题】：Vue3 reactive components on globalPropertiesglobalProperties 上的 Vue3 反应式组件
【发布时间】：2021-11-08 22:50:19
【问题描述】：

在 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 中仍然可行，或者我是否需要重构我所有的插件？

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

【问题讨论】：

标签： vue.js vuejs3

【解决方案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

【讨论】：

我考虑过ref()，这适用于我的一些插件，但其他插件使用生命周期事件，如created()，有些需要访问根实例上的其他globalProperties。我想我可以mount() 那些，直到我开始重构。谢谢。

【解决方案2】：

不是问题的确切答案，而是相关的。这是在组件之间共享全局变量的简单方法。

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

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

然后在我需要 $navigationProps 使用 2 路绑定的任何组件中：

<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;
    },
  },

对我来说就像一个魅力。

【讨论】：