从组件获取数据到另一个页面视图

Question

有一个组件“TableFields.vue”和两个视图文件“Home.vue”。和“Statistics.vue”。

在组件中，我在 对象下有 changes: [] 变量。data()

  data () {

    return {

      startStopA: true,

      startStopB: true,

      initialValueA: 3,

      initialValueB: 3,

      randomNumbersArray: [],

      randomSignA: '+',

      randomSignB: '+',

      signsArray: ['+', '-'],

      intervalA: null,

      intervalB: null,

      changes: []

    }

  },

该changes数组从calculationsA()函数动态获取对象。

    calculationsA () {

      this.randomSignA = this.signsArray[

        Math.floor(Math.random() * this.signsArray.length)

      ]

      this.randomSignA === '+'

        ? (this.initialValueA += this.randomNumbersArray[0])

        : (this.initialValueA -= this.randomNumbersArray[0])

      const d = new Date()

      // console.log(d.toLocaleTimeString())

      // console.log(this.randomNumbersArray[0])

      // this.changes.push(this.randomNumbersArray[0])

      // this.changes.push(d.toLocaleTimeString())

      // console.log(this.changes)

      const newChange = {}

      newChange.field = 'A'

      newChange.value = this.randomNumbersArray[0]

      newChange.time = d.toLocaleTimeString()

      this.changes.push(newChange)

    },

如何将 changes: [] 从 TableField.vue 组件传递到 Statistics.vue 页面，以便使用 编写动态表格a> 中看到。 组件的工作代码，可以从根 url changes 数组对象数据。我不确定，我是否需要创建新组件，或者没有它也可以完成。基本上，这是出于测试目的而实现的 TableField.vueHome.vue

    <div class="statistics">

      <table>

        <tr>

          <th>Field</th>

          <th>Value</th>

          <th>Time</th>

        </tr>

        <tr v-for="item in changes" :key="item.value">

          <td>{{ item.field }}</td>

          <td>{{ item.value }}</td>

          <td>{{ item.time }}</td>

        </tr>

      </table>

    </div>

  </div>

我需要该代码才能在 Statistics.vue 页面上运行。

为了更加方便，这里是 链接 gitlab 存储库。

Answer 1

据我所知，更好的解决方案应该是使用 Vuex (https://vuex.vuejs.org/)，它允许您将数据存储在称为存储的共享点中。您也可以使用此处记录的事件：https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events到组件

Answer 2

您可以在&nbsp;中导入&nbsp;TableField.vue&nbsp;并将&nbsp;作为 props 传递。Statistics.vuechanges: []

Answer 3

用户“异步”来自discord vue chat 已经为我解决了这个问题。解决方案有点复杂，需要更改几个文件。如果您想了解更多信息，请参阅 gitlab repo，因为由于其复杂性，我无法在此处记录它。