在路由器视图之间移动时 Vue 组件状态冻结

Question

我有一个自定义地图组件，它包装了一个 Openlayers 4 实例。我被迫使用的这个组件在我的 SPA 中的多个地方使用。初始化过程很长，所以我想保留一个可用的地图实例，并在需要时在视图之间移动它。问题是状态在组件移动时不会在组件内更新。

我把问题归结为 fiddle：https://jsfiddle.net/j16d4yto/ 当在同一路由器上移动时，状态更新良好（单击“更改文本”按钮）。但是当路由器视图发生变化时，组件通过 appendChild 移动到新的 div，状态冻结，您不能再更新文本变量。

这就是我将组件从一个元素移动到另一个元素的方式：

this.$root.$on('showMoveableComponent', function(element) {
      element.appendChild(thisElement);
      this.text = 'Changed text2';
    });

我敢打赌我在这里做错了什么，并且可能也以错误的方式解决了这个问题？

谢谢！

Answer 1

它不起作用，因为当 router-view 更改时，您的 MoveableComponent 已被销毁，只有它的 DOM 元素仍被您引用。您可以通过在 destroyed 生命周期回调函数中打印一些内容来进行测试。

所以这意味着你可以通过使用 built-in keep-alive 组件来解决这个问题：

<keep-alive>
  <router-view></router-view>
</keep-alive>

Example

keep-alive 组件将缓存在某些其他情况下可能不好的所有内容。

我认为解决这个问题的更好方法是创建另一个 Vue 实例并移动它。

const MoveableComponent = new Vue({
  el: '#some-id',
  template: `...`,
  data: { ... },
  methods: {
    changeText() {
      ...
    },
    moveTo(element) {
      element.appendChild(this.$el)
    }
  }
})

Example

在路由器视图之间移动时 Vue 组件状态冻结

Vue component state freezing when moved between router-views

vue.js