继续在历史记录中前后添加行

Posted 2023-02-23

【中文标题】继续在历史记录中前后添加行

【英文标题】：Resume adding rows on history back and forward

【发布时间】：2020-07-31 09:05:59

【问题描述】：

有两个页面：Home.vue 和 Statistics.vue。在主页上，有一个在页面加载时计算一些数字的间隔。当您切换到“/statistic”页面时，间隔停止，当您返回“/”页面时，间隔和计数从它们停止时开始。问题是，当您从“/statistics”切换到“/”并再次返回到“/statistics”时，我需要恢复向“/statistic”页面添加行。现在“/statistics”总是将值重置为默认值并从头开始添加行。检查解决方案的工作代码示例：https://codesandbox.io/s/black-sound-rseqb

“/统计”页面：

<template>
  <div class="statistics">
    <table v-for="(field, index) in fields" :key="index">
      <tr>
        <th>Field</th>
        <th>Value</th>
        <th>Time</th>
      </tr>
      <tr v-for="(change, index) in changesArray[index]" :key="index">
        <td> change.field </td>
        <td> change.value </td>
        <td> change.time </td>
      </tr>
    </table>
  </div>
</template>

<script>

export default 
  name: 'Statistics',
  props: 
    changesA: 
      type: Array,
      required: true
    ,
    changesB: 
      type: Array,
      required: true
    
  ,
  data () 
    return 
      fields: ['A', 'B'],
      changesArray: [this.changesA, this.changesB]
    
  

</script>

<style lang="scss" scoped>
.statistics 
  display: flex;

table:first-of-type 
  margin-right: 20px;

</style>

“App.vue”

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/statistics">Statistics</router-link>
    </div>
    <router-view :changesA.sync="changesA" :changesB.sync="changesB" />
  </div>
</template>

<script>
export default 
  name: 'App',
  data () 
    return 
      changesA: [],
      changesB: []
    
  

</script>

<style lang="scss">
#app 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;


#nav 
  padding: 30px 0;

  a 
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active 
      color: #42b983;
    
  

</style>

【参考方案1】：

我做了一些更改来修复您的代码

首先，您试图将 localChanges 传递给父级，该父级在每个组件加载时都会初始化，这会重置您的数组。它是通过使用修复的

this.changesA.push( ...obj );
this.changesB.push( ...obj );
this.$emit("update:changesA", [...this.changesA]);
this.$emit("update:changesB", [...this.changesB]);

其次，在您的 firstObjects() 方法中，您将 obj 上的索引处的项目推送为

this.changesB.push( ...obj[i] ); //see i

错了

另外，我认为您只想在数组为空时调用firstObjects()，这可以通过简单地放置一个封闭条件来完成。

固定沙盒：https://codesandbox.io/s/live-stats-with-pause-on-route-change-lqmqo

【讨论】：

在您的沙盒示例中，统计日志有点混乱，尽管您的修复是正确的。我不确定你对firstObjects() 的建议到底是什么意思，但这启发了我在挂载的钩子块上写：if (this.changesA && this.changesB === []) this.firstObjects() 和瞧！！！一切正常。现在。 :)

还有，我对你无私的帮助表示感谢。向您致以最诚挚的问候。

【参考方案2】：

有keep-alive；如 Vue 文档中所示。

<keep-alive>
  <component v-bind:is="statistics"></component>
</keep-alive>

Vue 文档： https://vuejs.org/v2/guide/components-dynamic-async.html

【讨论】：

您能否在“代码沙箱”中测试该代码。链接在问题的最后。如果它有效，请准确写出如何实现它，因为我尝试过但没有成功。

这种方法不起作用，因为在这种情况下change for 循环中的变量总是期望来自“/”页面的值。当您单击返回“/”时，会出现一个错误change is undefined，它会中断页面​​。我在<router-view :changesA.sync="changesA" :changesB.sync="changesB" /> 尝试过<keep-alive include="statistics">。