javascript - 硬重载后，vuex 状态未加载到 nuxtjs Mounted() 中

Question

我一直在 nuxtjs 中构建我的第一个应用程序，但我在 vue 状态方面遇到了一些问题。我集成了 vuex-persistedstate 和 js-cookie 来持久化状态。

我正在尝试获取 vuex 状态并设置组件内部状态中的值 (data () {})。

Notification.vue

computed: {
   ...mapState({
     user: state => state.auth.user
   })
 },
mounted() {
  this.notifications = this.user.notification
}

如果我从其他页面访问此页面，则效果很好。

但是如果我直接重新加载通知页面，this.user(vuex state) 为 null。如果我将其包装在 setTimeout() 中，即使在重新加载页面后我也能正确获取状态。

例如:

mounted () {
  setTimeout(() => {
    this.notification = this.user.notification
  })

我相信这是 vuex 和 nuxtjs 的异步问题，但我认为将 setTimeout 包装在所有组件的 Mounted() 方法中不是一个好主意。

有什么办法可以解决这个问题吗？

非常感谢。

Answer 1

我也遇到了同样的问题。我使用 this.$nextTick() 而不是 setTimeout() 修复了它。我认为它更干净一点。