Ember.js 5.4 如何在更新会话存储时更新组件变量

Question

Ember.js Octane 和 JavaScript（不是 TS）

我有访问会话存储的服务。当我添加或删除特定键时，我希望我的顶级组件能够切换导航栏的可见性。我尝试过各种跟踪等。我试图让观察者工作，但坦率地说，我不明白它，而且我不确定这是否是我需要的。

当商店更新时，然后我手动按 F5，应用程序 shell 就会看到更改。

如何让应用程序 shell 自己看到更改？

---

应用程序 shell .hbs 和 .js

{{#if this.isAuthenticated}}
<nav class="mt-8">...</nav>
{{/if}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking'
import { inject as service } from '@ember/service';

export default class ApplicationShellComponent extends Component {
    @service SessionManager
    @tracked isAuthenticated = this.SessionManager.isAuthenticated
}

---

服务.js

const SessionId_Key = 'SIDK'
export default class SessionManagerService extends Service {

    @tracked isAuthenticated = this.getAuthenticationToken()
    
    delAuthenticationToken()     {        this.delItem(SessionId_Key)        }
    getAuthenticationToken()     { return this.getItem(SessionId_Key)        }
    setAuthenticationToken(value){        this.setItem(SessionId_Key, value) }

    delItem(key)        {        sessionStorage.clear  (key)        }
    getItem(key)        { return sessionStorage.getItem(key)        }
    setItem(key, value) {        sessionStorage.setItem(key, value) }
}

STO问题：旧版ember

Answer 1

isAuthenticated

仅设置一次

    @tracked isAuthenticated = this.SessionManager.isAuthenticated

这意味着，变量

isAuthenticated

是用 sessionManager 中的值初始化的（并不是 isAuthenticated 总是代表

=

右侧的值（因为分配只发生一次）。

要使其具有反应性，您需要将其转换为gatter。

get isAuthenticated() {
  return this.SessionManager.isAuthenticated;
}

否则，如果您想保留

@tracked isAuthenticated

，您的函数之一将需要设置该值。

无论哪种情况，您的模板

{{#if this.isAuthenticated}}
  <nav class="mt-8">...</nav>
{{/if}

然后会按预期更新