Question

正如标题所说，我试图改变组件中prop / data的值，但触发器是从组件外部触发的，与Vuejs没有任何关系。

目前我尝试使用基于here的文档的简单状态管理器，如下所示：

var store = {
  debug: true,
  state: {
    progress: 23
  },
  setProgress (uff) {
    if (this.debug) console.log(uff)
    this.state.progress = uff
  }
}

文档让我相信，如果progress的值发生变异，那么如果我相应地链接它们，我的Vue实例的值也会改变。但这并不适用于某个组件（我的猜测是因为它是一个功能）。

这是我的组成部分：

Vue.component('transcoding', {
  data () {
    return {
      progress: store.state.progress
    }
  },
  template: `
    <v-progress-circular
        :size="130"
        :width="25"
        :value="progress"
        color="teal"
      >
      {{progress}}
    </v-progress-circular>
  `
})

所以，当我触发store.setProgress(value)时，没有任何反应。日志消息确实发生了，但组件中的状态未更新。

这是当前触发状态更改的脚本：

App.cable.subscriptions.create(
  { channel: "ProgressChannel", room: "2" },
  { received: function() {
    store.setProgress(arguments[0])
   }}
)

它是Ruby on Rails中的ActionCable websocket。触发器工作正常，但我无法在状态更改和组件之间建立连接。

我尝试在组件的mounted()事件中加载此脚本，以为我可以像这样引用这个值：

Vue.component('transcoding', {
  data () {
    return {
      progress: 0
    }
  },
  template: `
    <v-progress-circular
        :size="130"
        :width="25"
        :value="progress"
        color="teal"
      >
      {{progress}}
    </v-progress-circular>
  `,
  methods: {
    setProgress: function(uff) {
      this.progress = uff
    }
  },
  mounted() {
    App.cable.subscriptions.create(
      { channel: "ProgressChannel", room: "2" },
      { received: function() {
        this.setProgress(arguments[0])
       }}
    )
  }
})

但这给了我一个错误，说this.setProgress不是一个函数，这很明显，因为我在App.cable.subscriptions的create方法中调用它。

我该如何使这项工作？我意识到我将问题与我的问题混在一起，但我想说明我的目标是什么。我只是想知道如何让组件的progress数据从外部更新，或者如果我可以让它找到函数，则从组件本身更新。

Answer 1

您将数据项初始化为商店中的值：

  data () {
    return {
      progress: store.state.progress
    }
  }

商店的更改不会传播到您的数据项。您可以删除数据项，只需在需要的地方使用store.state.progress，或者如果需要本地单名句柄，则可以创建一个返回其值的computed。

如何从组件的OUTSIDE更改组件的prop（或数据）的值？

1 个答案: