Can aframe-state-component track state across scenes?

Question

I have an (angular 5 based) a-frame app that has two scenes. I want to keep track of application state such as config parms using the aframe-state-component component. I want to access the cumulative state across both scenes. However, empirically it seems that every time I switch to the other scene all the variables in the state are reset to their initial state.

Also, the fact that you can access the state variables using a statement like:

AFRAME.scenes[0].systems.state.state.score

suggests to me that the state is tied to one scene only (scenes[0] being equal to the current scene).

At first I thought it was an angular issue as the supposed singleton service where I initialized state was being initialized on every scene transfer. But I discovered that linking using the angular router:

this.router.navigate([(evt.target as any).previousSibling.getAttribute('link').href, {}])

Instead of the default:

window.location = this.data.href

Fixed that problem. So it now appears to be an issue with A-frame.

Is the notion that this component can only be used intra-scene and not inter-scene a correct assumption?

Note: I'm also experimenting with angular-redux/store and it seems to have no problem retaining state across scenes, but I'd rather use aframe-state-component as it seems simpler.

ngokevin ngokevin · Accepted Answer · 2018-05-30T08:35:35

You can store in localStorage and restore on load. Something like:

window.addEventListener('beforeunload', () => {
  localStorage.setItem('state', JSON.parse(state));
});

initialState: localStorage.getItem('state') 
  ? JSON.parse(localStorage.getItem('state'))
  : {
  // Initial state...
}

EDIT: Realized you meant for in-app scene changes? You can do something similar. When a scene is unloaded, store it somewhere, then state component checks if it exists?

Can aframe-state-component track state across scenes?

2 Answers