nuxt 中的调用上下文在 v-bind 中不起作用

Question

我有关于在 Nuxt 中使用上下文或原型的问题

我为 'modal' 名称创建一个常量，如下所示：

export default Object.freeze({ 
  MODAL_SHOWPRO: "MODAL_SHOWPRO",
})

我还在插件文件夹中创建了 constant.js 并且已经添加到 nuxt 配置中。

import modals from '@/constants/modal';
export default ({ app }, inject) => {  
  inject('modalName', modals)
}

在组件中我无法从 v-bind 调用值，它说：未定义 MODAL_SHOWPRO

<Popup :id="$modalName.MODAL_SHOWPRO" />

但我可以从 $emit 函数调用它，如下所示：

@click="$nuxt.$emit('showModal', {id: $modalName.MODAL_SHOWPRO})"

你能告诉我为什么以及如何解决它吗？

注意：如果满足以下条件，它将起作用：我做数据

{
    modal: ''
}

并添加到已创建的：

async created() {      
    this.modalName = await this.$modalName
}

Answer 1

Nuxt 是一个 meta-framework 旨在提供通用应用程序（服务器端然后是客户端）。因此，您需要考虑服务器和客户端。

在您的代码中，您指定了 ssr: false，这是过时的，应该是 mode: 'client'。但是这样设置仍然是错误的，因为这意味着 ENUM 在服务器上不可用（因此错误）。

这样设置比较合适（考虑到插件的性质），也解决了问题

plugins: ['~/plugins/constant.js'],

Call context in nuxt not working in v-bind