页面历史向前向后暂停功能

Question

有Home.vue 和Statistics.vue 页面。 Home.vue 渲染 TableFields.vue 组件。在Home.vue，页面加载时设置了初始值为“3”的字段编号。在计算函数上设置间隔每两秒添加一次数字。如何实现，从 '/' 到 '/statistics' 时，所有更改都应该暂停，返回时应该恢复？在主页的每个字段下面，已经有按钮可以切换setInterval() 功能和停止/恢复计算。基本上，当从“/”到“/statistics”时，应该触发clearInterval()，在“/”页面停止计算。 @Saksham TableFields.vue：

<template>
  <div>
    <table class="table-a">
      <tr>
        <th>A</th>
        <td class="sign">{{ this.randomSign.A }}</td>
        <td>{{ initialValue.A }}</td>
        <td v-show="this.randomSign.A == '+'">&#x2B06;</td>
        <td v-show="this.randomSign.A == '-'">&#x2B07;</td>
      </tr>
    </table>
    <button @click="toggleIntervalA()">
      <span v-show="this.startStop.A">Stop</span>
      <span v-show="!this.startStop.A">Start</span>
    </button>
    <table class="table-b">
      <tr>
        <th>B</th>
        <td class="sign">{{ this.randomSign.B }}</td>
        <td>{{ initialValue.B }}</td>
        <td v-show="this.randomSign.B == '+'">&#x2B06;</td>
        <td v-show="this.randomSign.B == '-'">&#x2B07;</td>
      </tr>
    </table>
    <button @click="toggleIntervalB()">
      <span v-show="this.startStop.B">Stop</span>
      <span v-show="!this.startStop.B">Start</span>
    </button>
  </div>
</template>

<script>

export default {
  name: 'TableFields',
  props: {
    changesA: {
      type: Array,
      required: false
    },
    changesB: {
      type: Array,
      required: false
    }
  },
  data () {
    return {
      fields: ['A', 'B'],
      startStop: {
        A: true,
        B: true
      },
      initialValue: {
        A: 3,
        B: 3
      },
      randomNumbersArray: [],
      randomSign: {
        A: '+',
        B: '+'
      },
      signsArray: ['+', '-'],
      interval: {
        A: null,
        B: null
      },
      localChanges: {
        A: [],
        B: []
      },
      timer: undefined
    }
  },
  computed: {},
  methods: {
    firstObjects () {
      for (let i = 0; i < this.fields.length; i++) {
        const date = new Date()
        const obj = {}
        obj.field = this.fields[i]
        obj.value = Number((Math.random() * 1 + 1).toFixed(2))
        obj.time = date.toLocaleTimeString()
        this.changesA.push(obj[0])
        this.changesB.push(obj[1])
        this.$emit('update:changesA', this.localChanges.A)
        this.$emit('update:changesB', this.localChanges.B)
      }
    },
    replaceNumbersArray () { // replace random A, B numbers at time interval
      const n1 = Number((Math.random() * 1 + 1).toFixed(2)) // n1 = first number (A)
      const n2 = Number((Math.random() * 1 + 1).toFixed(2)) // n2 = second number (B)
      this.randomNumbersArray.splice(0, 2, n1, n2)
    },
    toggleIntervalA () {
      this.startStop.A = !this.startStop.A
      if (this.startStop.A) {
        this.interval.A = setInterval(this.calculationsA, 2000)
      } else {
        clearInterval(this.interval.A)
      }
    },
    toggleIntervalB () {
      this.startStop.B = !this.startStop.B
      if (this.startStop.B) {
        this.interval.B = setInterval(this.calculationsB, 2000)
      } else {
        clearInterval(this.interval.B)
      }
    },
    calculationsA () {
      this.randomSign.A = this.signsArray[
        Math.floor(Math.random() * this.signsArray.length)
      ]
      this.randomSign.A === '+'
        ? (this.initialValue.A += this.randomNumbersArray[0])
        : (this.initialValue.A -= this.randomNumbersArray[0])
      const date = new Date()
      const newChange = {}
      newChange.field = 'A'
      newChange.value = this.randomNumbersArray[0]
      newChange.time = date.toLocaleTimeString()
      this.changesA.push(newChange)
      this.$emit('update:changesA', this.localChanges.A)
    },
    calculationsB () {
      this.randomSign.B = this.signsArray[
        Math.floor(Math.random() * this.signsArray.length)
      ]
      this.randomSign.B === '+'
        ? (this.initialValue.B += this.randomNumbersArray[1])
        : (this.initialValue.B -= this.randomNumbersArray[1])
      const date = new Date()
      const newChange = {}
      newChange.field = 'B'
      newChange.value = this.randomNumbersArray[1]
      newChange.time = date.toLocaleTimeString()
      this.changesB.push(newChange)
      this.$emit('update:changesB', this.localChanges.B)
    }
  },
  mounted () {
    this.firstObjects()
    setInterval(this.replaceNumbersArray, 2000)
    this.initialValue.A = this.$root.initialValue.A || 3
    this.initialValue.B = this.$root.initialValue.B || 3
    this.timer = setInterval(_ => {
      this.interval.A = this.calculationsA
      this.interval.B = this.calculationsB
    }, 2000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.$root.initialValue.A = this.initialValue.A
    this.$root.initialValue.B = this.initialValue.B
  }
}
</script>

<style lang="scss" scoped>
.table-b {
  margin-top: 15px;
}
.sign {
  width: 12px;
  text-align: center;
}
button {
  border: 1px solid transparent;
  border-radius: 0;
  background-color: #42b983;
  color: #ffffff;
  margin-top: 7px;
  padding: 5px 10px;

  &:hover {
    opacity: 0.9;
    cursor: pointer;
  }
}
</style>

项目回购：link

Answer 1

尝试使用 beforeDestroy() 钩子将计数器推送到根组件或 vuex 存储（如果您正在使用），并在您返回到从那里恢复的路由后在 mounted() 钩子中获取计数器.

并在您的组件中用作

export default {
...
    beforeDestroy () {
        this.$root.counter = this.counter;
    },
    mounted () {
        this.counter = this.$root.counter || 0;
    }
...
}

我在https://codesandbox.io/s/preserve-timer-state-2osi7 创建了一个沙箱，它在我们离开路线时保留计时器的状态，并从我们离开的地方启动计时器。

评论说明：

根据您的评论，您似乎正在尝试将属性设置为未定义的对象。最初，根组件中没有名称为 initialValue 的属性，您正在尝试访问其中的属性 A。

您需要先检查是否定义了initialValue，然后尝试检查A

this.initialValue.A = this.$root.initialValue && this.$root.initialValue.A ?  this.$root.initialValue.A : 3

还要确保您的数据有 initialValue 作为空对象

initialValue: {}