Ember服务在重新加载时丢失 [英] Ember service is lost on reload

问题描述

我正在使用Ember.Service作为一个长寿命的ember对象，因为我需要它在我的应用程序的不同部分可用。

 从ember导入Ember; 
 
导出默认值Ember.Service.extend（{
 user：null，
 updateActiveUser（user）{
 this.set（'user'，user）; 
}，
 getActiveUser（）{
 const user = this.get（'user'）; 
 if（user）{
 return user; 
} else {
 return null; 
} 
} 
}）; 
  

在我的组件上，我以这种方式要求此用户：
import Ember from 'ember';

 导出默认值Ember.Component.extend（{
 activeUser：Ember.inject.service（'活动用户'），
列表：[]，
 selectedUser：null，
 didReceiveAttrs（）{
 this._super（）; 
 this.set列表'，this.get（'model'））; 
 const active = this.get（'activeUser'）。getActiveUser（）; 
 if（active）{
 this.set 'selectedUser'，active）; 
} else {
 this.set（'selectedUser'，this.get（'model'）。objectAt（0））; 
} 
 }，
 actions：{
 selectUser（user）{
 this.set（'selectedUser'，user）; 
 this.get（'activeUser'）。updateActiveUser（user） ; 
 
} 
} 
}）; 
  

我的问题是，在我选择一个用户之后，我重新加载页面不是保存最后一个用户选择并显示默认用户。

解决方案

（问题已更改后编辑）

即使在刷新页面之后，您仍然试图将该应用程序状态保留在客户端浏览器上。

我认为您应该查看使用 localStorage 。

在您的服务中执行以下操作：

 从ember导入Ember; 
 
导出默认值Ember.Service.extend（{
 user：null，
 
 updateActiveUser（user）{
 this.set（'user'用户）; 
 //保留用户的浏览器，以便可以在重新载入时检索
 localStorage.setItem（'user'，JSON.stringify（user））; 
}，
 
 getActiveUser（）{
 var user = this.get（'user'）; 
 if（user）{
 return user; 
} else {
 //尝试从localStorage获取用户
 var foundUser = JSON.parse（localStorage.user）; 
 if（foundUser）{
 this.set（'user'，foundUser）; 
 return foundUser; 
} else {
 return null; 
} 
} 
} 
}）; 
  

最后，为什么要使用 const ？这意味着如果你永远不会改变变量的话。但是看起来用户经常更改。如果您更改标记为 const 的变量，ES6应该会抛出异常。 const - MDN

I'm using Ember.Service as a long-lived ember object cause I need it to be available in different parts of my application.

import Ember from 'ember';

export default Ember.Service.extend({
    user:null,
    updateActiveUser(user){
        this.set('user',user);
    },
    getActiveUser(){
        const user=this.get('user');
        if(user){
            return user;
        }else{
            return null;
        }   
    }
});

On my component I'm asking for this user in this way: import Ember from 'ember';

export default Ember.Component.extend({
activeUser:Ember.inject.service('active-user'),
list: [],
selectedUser:null,
didReceiveAttrs() {
    this._super();
    this.set('list',this.get('model'));
    const active=this.get('activeUser').getActiveUser();
    if(active){
        this.set('selectedUser',active);
    }else{
        this.set('selectedUser',this.get('model').objectAt(0));
    }
},
actions:{
    selectUser(user){
        this.set('selectedUser',user);
        this.get('activeUser').updateActiveUser(user);

    }
}
});

My issue is that after I select a user and then I reload the page is not saving the last user selected and its showing the default user.

解决方案

(edited after the question has changed a bit)

You are trying to get the app state to persist on the client's browser, even after a page refresh.

I think you should look into using localStorage.

In your service do something like this:

import Ember from 'ember';

export default Ember.Service.extend({
  user: null,

  updateActiveUser(user){
    this.set('user', user);
    // persist the user's browser so it can be retrieved on reload
    localStorage.setItem('user', JSON.stringify(user));
  },

  getActiveUser(){
    var user = this.get('user');
    if (user) {
      return user;
    } else {
      // try to get the user from localStorage
      var foundUser = JSON.parse(localStorage.user);
      if (foundUser) {
        this.set('user', foundUser);
        return foundUser;
      } else {
        return null;
      }
    }   
  }
});

Lastly, why are you using const? That is meant to be used if you are never going to change the variable. But it looks like the user is changed regularly. ES6 is supposed to throw an exception if you change a variable marked as const. const - MDN

这篇关于Ember服务在重新加载时丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！