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

Question

我正在运行一个setup()方法来导入一个外部组件，该组件仅与Options API一起工作。因此，一旦导入完成，我就需要使用Options APIdata配置组件。

如何访问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()
]

如果我运行上面的代码，我会得到错误:uncapture（in promise）referenceError：EssentialsPlugin is not defined。

在本例中，ckeditor5仅与VUE中的Options API一起工作。在可预见的将来，它不能在组合API中配置。因此，如何使用组合APIsetup()中的引用值在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));
  }
}