[SOLVED] Background refresh trigger

I’m using a tabbed layout. The user can change some settings on the last tab, which should sometimes trigger a refresh of one of the other views. The way I’ve managed it right now, is to add a ‘should_refresh’ class to the view tabs which should be refreshed, check this class in the tab:show event and refresh the view if needed. But this feels wrong, as I think the tabs should be able to ‘subscribe’ to a particular “settings changed event” and decide if it should refresh by itself.

You need to use events for this.

Just in the page where you need to refresh data:

methods: {
  doRefresh() {
    // do something
  }
},
on: {
  pageInit() {
    this.app.on('settingsChanged', this.doRefresh);
  },
  pageBeforeRemove() {
    this.app.off('settingsChanged', this.doRefresh);
  },
}

And in settings when user changed something, just emit event:

app.emit('settingsChanged');
1 Like

@nolimits4web Works great, that was the way I was looking for, thanks! I still have to learn to make more use of the available component context. :grinning: This works great to reload the particular view with it’s home route:

return {
methods: {
    do_refresh: function(e) {

	var route = this.$router.history[0];
	this.$router.navigate(route, {
	    reloadAll: true
	});

    }
},

on: {
    pageInit: function(e, page) {
	this.$app.on('settingsChanged', this.do_refresh); // Please note the dollar sign!
    },
    pageBeforeRemove: function(e, page) {
	this.$app.off('settingsChanged', this.do_refresh); // Please note the dollar sign!
    }
}
}

I only notice that when the view is 3 or more levels ‘deep’ navigated, the views router history is cleared correctly but the first view in history isn’t removed from the DOM and stays there forever. I’ve tried the different router options (reloadAll, clearPreviousHistory) etc but can’t get the DOM history to be cleared.

Before refresh:

After refresh:

That is because you have stackPages enabled. Initial DOM pages can’t be removed

Okay. Should I manually remove the orphaned page to prevent unneeded memory usage?

You can, and in this case also make sure you remove it from view.history array if it is there.

1 Like