javascript - Safari 中带有商店模式的 HMR 奇怪行为 - Vue2

Question

我在 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 调用返回的速度足够快，以便在呈现导航栏数据时数据可用，但有时则不然。

在其他浏览器中，即使数据在加载时不可用， react 数据也会在数据可用时更新。由于某种原因，Safari 中的情况并非如此(除非我通过重新保存文件来强制更新，热重载确实有效)

编辑＃2:

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

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

所以现在的问题变得更加基本，我如何在 Safari 中使用商店模式？

Answer 1

我找到了问题的根源。

我实际上在商店周围使用了代理对象。显然这只会在 Safari 中搞乱事情。没有它一切都可以正常工作。