1

我在 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 模式？

4

1 回答 1

0

我找到了问题的根源。

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

于 2016-11-02T18:21:29.777 回答