Nuxt：创建一个自动添加计算到组件的插件

Posted 2023-02-16

【中文标题】Nuxt：创建一个自动添加计算到组件的插件

【英文标题】：Nuxt: Create a plugin that automatically adds a computed to component

【发布时间】：2022-01-06 11:50:00

【问题描述】：

我想创建一个 Nuxt 插件，它会自动将计算结果添加到具有特定属性的组件（不使用 mixin）。

例如，任何具有addComputedHere 属性的组件：

export default 
  data() 
    return 
  ,
  computed: 
    myComputed: () => 'foo'
  ,
  addComputedHere: true

会变成：

export default 
  data() 
    return 
  ,
  computed: 
    myComputed: () => 'foo',
    injectedComputed: () => 'bar' // Injected
  ,
  addComputedHere: true

到目前为止，我不确定使用 Nuxt 插件/模块/中间件或仅使用 Vue 插件（如果可行的话）的最佳解决方案是什么。

你会怎么做？

【问题讨论】：

这只能通过 mixin 来实现。

【参考方案1】：

如果有人遇到同样的情况，我通过创建一个 Vue 插件找到了解决方案，该插件应用了一个 mixin 来自定义 beforeCreate 中的组件：

import Vue from 'vue';

const plugin = 
  install(Vue, options) 
    Vue.mixin(
      beforeCreate() 
        if (this.$options.addComputedHere) 
          this.$options.computed['injectedComputed'] = () => 'bar';
        
      
    )
  
;

Vue.use(plugin);