具有商店模式的 Safari 中的 HMR 奇怪行为 - Vue2答案

【问题标题】：HMR strange behavior in Safari with store pattern - Vue2具有商店模式的 Safari 中的 HMR 奇怪行为 - Vue2
【发布时间】：2017-03-15 08:01:12
【问题描述】：

我在 Vue 2 中实现了一个简单的用户存储来跟踪当前经过身份验证的用户。

看起来像这样：

const user = {
  isGuest: true,

  state: {
    name: ''
  },

  save (user) {
    this.isGuest = false
    this.state = user
  },

  clear () {
    this.isGuest = true
    this.state = { }
  }
}

我还有一个简单的身份验证服务（作为插件实现），它从 api 获取用户并将他保存到商店中。每当用户登录或加载应用程序时，身份验证服务都会获取用户并将其保存到商店。

我正在尝试从另一个组件（我的导航栏）访问商店。我的组件中有这个来导入 userStore：

import user from '../store/user'

export default {
  data () {
    return {
      user
    }
  }
}

这一切在 Chrome 和 Firefox 中运行得非常好。

但是，在 Safari 中我得到了一些奇怪的行为：

如果我通过保存 Navbar.vue 文件来强制导航栏的数据进行热重载，则从存储中获取数据。但是，在所有其他情况下（页面重新加载，或登录后 vue-router 重定向后），导航栏的数据不会使用当前用户存储进行更新。

如何解决此问题以在所有浏览器中工作？

编辑：

我有更多信息：

如果我坐在 Safari 中的刷新按钮上，有时我会随机从用户存储中获取正确呈现的数据，但随机我不会。

我的预感是，有时 api 调用返回的速度足够快，以便在呈现导航栏数据时数据可用，有时则不可用。

在其他浏览器中，即使数据在加载时不可用，它也会在数据可用时更新响应式数据。出于某种原因，Safari 中的情况并非如此（除非我通过重新保存文件强制它进行更新，热重载确实有效）

编辑 #2：

我可以确认这是问题所在。更新商店时我的数据没有更新。

我通过让导航栏组件在从存储中获取数据之前休眠 2 秒来证明这一点，并且确实在 Safari 中每次都正确填充数据。

所以现在的问题变得更加基础了，如何在 Safari 中使用 store 模式？

【问题讨论】：

标签： javascript safari vue.js webpack-dev-server hot-module-replacement

【解决方案1】：

我找到了问题的根源。

我实际上是在商店周围使用代理对象。显然，这只在 Safari 中搞砸了。没有它一切正常。

【讨论】：