在 Vue 3 的插件中创建全局计算属性

Posted 2023-02-23

【中文标题】在 Vue 3 的插件中创建全局计算属性

【英文标题】：Create a global computed property in a plugin in Vue 3

【发布时间】：2021-12-19 05:48:56

【问题描述】：

我正在尝试从 Vue 3 插件中创建一个全局计算属性，以便我的属性可以在任何组件中被动使用。我正在使用standard Vue 3 模式：

app.config.globalProperties.$foo = ...

这非常适合让我从任何组件访问this.$foo。但是，我也想在this.$foo 设置时触发行为。但是当我尝试使它成为一个可设置的计算属性时，就像这样——

app.config.globalProperties.$foo = computed(
  get: () => ...
  set: () => ...
)

——它不像一个计算属性：如果我从一个组件运行this.$foo = 'bar'，它只会覆盖属性，而不触发计算的setter。 （在没有 setter 的计算上测试它，该属性也被简单地覆盖，Vue 通常会抛出警告。）

如何使用 setter 进行全局计算？关于全局属性（或 Vue 3 组合 API 中的计算属性）应该如何工作，我在这里是否遗漏了什么？

【问题讨论】：

我认为，globalProperties 是静态属性，非反应性。

您将 $foo 设为计算值，因此您可以通过$foo.value 对其进行修改。 this 没有被使用，所以你不应该依赖它。

简单地将您的计算结果导出到一个文件中并将其导入到您需要的任何地方怎么样？

【参考方案1】：

computed() 返回一个ref，因此它的值必须通过.value 属性访问。直接设置$foo 只会覆盖对某个新值的引用，而不是修改computed ref 的值：

this.$foo = 'bar'        // ❌ overwrites the computed ref
this.$foo.value = 'bar'  // ✅ sets computed ref's value; triggers setter

您可能需要反应性，并且带有 getter/setter 的 computed ref 需要为此使用另一个 ref：

// main.js
import  computed, ref  from 'vue'
⋮
let foo = ref(123)
app.config.globalProperties.$foo = computed(
  get: () => foo.value,
  set: value => foo.value = value,
)

// MyComponent.vue
export default 
  methods: 
    logFoo() 
      console.log(this.$foo.value) // => 123
    ,
    updateFoo() 
      this.$foo.value++
    
  

demo