对象的引用以某种方式丢失

Question

我正在构建使用模型，服务和自定义元素的Aurelia框架的相当先进的应用程序。

我有一个用户模型包含用户名，电子邮件等以及bool isLoggedIn。

我有一个存储用户在localStorage的用户服务，让您更新用户数据等等等等

我终于有使用用户服务的一些自定义元素，以获取当前用户，并显示UI这取决于用户是否登录。

我面临的问题是，在使用用户服务提取用户后，从我的一个自定义元素（存储在用户服务中）更新用户模型后，另一个自定义元素对所述用户的引用型号不会更新。

我试着在JSFiddle中复制这个问题（在普通的JS中 - 我正在写这个在ES6中），但没有这样做，在小提琴中的所有工作正常。

这里有很多代码，但我想听听您的意见，我可能会为此发生什么错误？

这里是我有什么要点：

user.model.js

export class User { 
    username = ''; 
    isLoggedIn = false; 

    constructor (data) { 
     Object.assign(this, data); 
    } 
} 

user.service.js

import { User } from 'user.model'; 

export class UserService { 
    constructor() { 
     this.user = null; 
    } 

    getUser() { 
     // User is cached 
     if (this.user) { 
      return Promise.resolve(this.user); 
     } 

     // Check if we have localStorage 
     var user = window.localStorage.getItem('user'); 

     if (user) { 
      this.user = new User(JSON.parse(user)); 

      return Promise.resolve(this.user); 
     } 

     // No user - create new 
     this.user = new User(); 

     return Promise.resolve(this.user); 
    } 

    saveUser() { 
     this.getUser().then(() => { 
      window.localStorage.setItem('user', JSON.stringify(this.user)); 
     }); 
    } 

    updateUser (user) { 
     this.getUser().then(() => { 
      Object.assign(this.user, user); 

      this.saveUser(); 
     }); 
    } 

    login() { 
     this.updateUser({ 
      isLoggedIn: true 
     }); 

     return Promise.resolve(true); 
    } 
} 

定制element.js

import { inject } from 'aurelia-framework'; 

import { UserService } from 'user.service'; 

@inject (UserService) 
export class CustomElement { 
    constructor (userService) { 
     this.userService = userService; 
    } 

    attached() { 
     this.userService.getUser().then(user => { 
      this.user = user; 

      console.log('Fetched user:'); 
      console.dir(this.user); 

      console.log('Same?'); 
      console.dir(this.user === user); // this is true 
     }); 

     // At some point another custom element fires the UserService.login() method 
     // Here we check that our reference to the user also updates 

     setInterval(() => { 
      console.log('Is user logged in?'); 
      console.dir(this.user.isLoggedIn); // This is always false - even after UserService.login() has been called and UserService.user is updated (if I console.dir this.user inside UserService it is indeed updated) 

      // Grab a new version of UserService.user 
      this.userService.getUser().then(user => { 
       console.log('Fetched new user, is new user and our user same?'); 
       console.dir(this.user === user); // false :/ the new user fetched here actually has isLoggedIn === true but our this.user does not... 
      }); 
     }, 2000); 
    } 
} 

正如在评论中指出，在一个点其他自定义元素运行UserService.login()从而改变UserService.user.isLoggedIn到true（这体现在UserService如果我console.dir其this.user），但其他CustomElement的this.user不不更新。

顺便说一句：Promise.resolve()在UserService.getUser()的原因是，将来会有服务器调用。

Tbh对于这种类型的JS编程，来自jQuery世界的更多新东西，即使我基本上爱上了Aurelia这样的东西，仍然让我非常困惑，所以希望在这里有一些见解： ）

Answer 1

看着你提供的代码，我没有看到什么会导致你描述的行为。

一个suggestion-使代码更易于管理了一点，异步少......如果你的结构是这样的：

user.js的

export class User { 
    loggedIn = false; 
    name = 'Anonymous'; 
} 

用户商店。JS

@inject(User) 
export class UserStore { 
    constructor(user) { 
    this.user = user; 
    } 

    load() { 
    const serializedUser = localStorage.getItem('user'); 
    if (!info) { 
     return; 
    } 
    const storageUser = JSON.parse(serializedUser); 
    this.user.loggedIn = storageUser.loggedIn; 
    this.user.name = storageUser.name; 
    } 

    save() { 
    const serializedUser = JSON.stringify(this.user); 
    localStorage.setItem('user', serializedUser); 
    } 
} 

AUTH-service.js

@inject(User, UserStore) 
export class AuthService { 
    constructor(user, store) { 
    this.user = user; 
    this.store = store; 
    } 

    login(username, password) { 
    return fetch('https://api.megacorp.com/login', { method: 'POST' ... }) 
     .then(result => { 
     this.user.loggedIn = true; 
     this.user.name = result.name; 
     this.store.save(); 
     }); 
    } 
} 

定制element.js

@inject(User) 
export class CustomElement { 
    constructor(user) { 
    this.user = user; 
    } 

    ... 
} 

的好处是你的自定义元素永远需要在采取DEP异步的东西。他们只是获取应用程序的User实例，其实例可能会更改，但始终保持相同的实例。