时间戳

首页 > 解决方案 > 基于插件值的 Vue 计算属性

vue.js - 基于插件值的 Vue 计算属性

问题描述

我实际上正在通过将 vue 应用程序集成到一个插件来重构它，但是我遇到了一个关于计算数据的问题。

我正在尝试做的是将在插件中通过计算属性修改的数据作为目标，但问题是 vue 不针对数据的更改

这是我的问题的一个非常简单的例子

插件

install(Vue) {
  Vue.prototype.$myPlugin= {
    data: 0,

    setValue(val) {
      this.data = val
    }
  }
}

组件（尽管修改了值，但不记录）

computed: {
  reactiveData() {
    return this.$myPlugin.data1
  }
},
watch: {
  reactiveData() {
    console.log('Value changed')
  }
},
mounted() {
  this.$myPlugin.setValue(32)
  this.$myPlugin.setValue(64)
}

我知道某些 vue 数据由于某种原因不是反应性的，但我真的需要了解如何使我的插件具有反应性。

预先感谢您的帮助 ！

标签： vue.jspluginsreactivecomputed-properties

解决方案

您需要使用Vue.observable显式地使数据反应：

Vue.prototype.$myPlugin = Vue.observable({
  data: 0,

  setValue(val) {
    this.data = val
  }
})

推荐阅读