Получить данные из компонента на другой вид страницы

Question

Существует один компонент "TableFields. vue" и два файла представления "Home. vue" и "Статистика. vue".
В компоненте у меня есть переменная changes: [] в data() object.

  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 page, для кодирования динамической c таблицы с changes данными объектов массива Я не уверен, нужно ли мне создавать новый компонент или это можно сделать без него. По сути, это рабочий код из компонента TableField.vue, который реализован для целей тестирования и который можно увидеть из Home.vue, который является root url.

    <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 page.
Вот ссылка на репозиторий gitlab для большего удобства.

Answer 1

Вы можете импортировать TableField.vue в Statistics.vue и передавать changes: [] в качестве реквизита.

Answer 2

Пользователь "asyn c" с разногласий vue Чат решил это для меня.
Решение было немного сложным и потребовало внесения изменений в несколько файлов.
Обратитесь к репозиторию gitlab, если вам интересно узнайте больше об этом, потому что я не могу документировать это здесь из-за его сложности.

Answer 3

По моему мнению, лучшим решением должно быть использование Vuex (https://vuex.vuejs.org/), которое позволяет вам хранить данные в точке общего доступа, называемой store.

В качестве альтернативы вы можете использовать события, как описано здесь: https://vuejs.org/v2/guide/components-custom-events.html#Binding -Native-Events-to-Components