如何在 Options API 中使用从 Composition API 返回的 ref？

Question

我正在运行 setup() 方法来导入仅适用于 Options API 的外部组件。因此，导入完成后，我需要使用 Options API data 配置组件。

如何在 Options API 的 data 区域中访问从 setup() 返回的 ref 值？这就是我的意思：

setup() {
    const IsBrowser = typeof window !== 'undefined';
    let EssentialsPlugin = ref(null);
    if (IsBrowser) {
      import('@ckeditor/ckeditor5-essentials/src/essentials').then(module => EssentialsPlugin.value = module);
    }

return {
 EssentialsPlugin
},

data() {
return { 
CKEditorConfig:  {
    plugins: [
      EssentialsPlugin   // Needs to be the EssentialsPlugin returned from setup()
]

如果我运行上面的代码，我会得到错误：Uncaught (in promise) ReferenceError: EssentialsPlugin is not defined。

在这种情况下，CKEditor5 仅适用于 Vue 中的 Options API。它不能在 foreseeable future 的 Composition API 中配置。因此，如何使用来自 Composition API setup() 的 ref 值在 Options API 中配置它？

Answer 1

如果您必须为 data 使用 Options API，那么使用生命周期挂钩似乎也是最明智的做法：

data: () => ({
  isBrowser: typeof window !== 'undefined',
  CKEditorConfig: {
    plugins: []
  }
}),
created() {
  if (this.isBrowser) {
    import('@ckeditor/ckeditor5-essentials/src/essentials')
    .then(module => this.CKEditorConfig.plugins.push(module));
  }
}