Styjun

I've got a grid component that I use in many routes in my app. I'd like to persist its state (ie. paging, search param) and restore it when the user comes back to the grid (ie. from editing a row). On the other hand, when the user starts a new flow (ie. by clicking a link) then the page is set to zero and web service is called with the default param.

How can I recognise the user does come back rather then starts a new flow?

When I was researching the problem I've come across the following solutions.
Unfortunatelly they didn't serve me

1/ using router scroll behaviour

scrollBehavior(to, from, savedPosition) 
to.meta.comeBack = savedPosition !== null;

It does tell me if the user comes back. Unfortunately the scroll behaviour runs after grid's created and mounted hooks are called. This way I have no place to put my code to restore the state.

2/ using url param

The grid's route would have an optional param. When the param is null then the code would know it's a new flow and set a new one using $router.replace routine. Then the user would go to editing, come back and the code would know they come back because the route param != null. The problem is that calling $router.replace re-creates the component (ie. calling hooks etc.). Additionally the optional param mixes up and confuses vue-router with other optional params in the route.

HISTORY COMPONENT

// component ...
// can error and only serves the purpose of an idea
data() 
 return 
 history: []
 
,
watch: 
 fullRoute: function()
 this.history.push(this.fullRoute);
 this.$emit('visited', this.visited);
 
,
computed: 
 fullRoute: function()
 return this.$route.fullPath
 ,
 visited: function() 
 return this.history.slice(-1).includes(this.fullRoute)
 

the data way

save the information in the browser

// component ...
// can error and only serves the purpose of an idea
computed: 
 gridData: 
 get: function() 
 return JSON.parse(local.storage.gridData) 
 ,
 set: function(dataObj)
 local.storage.gridData = JSON.stringify(dataObj)
 
 

//...

use statemanagement

// component ...
// can error and only serves the purpose of an idea
computed: 
 gridData: 
 get: function() ,
 set: function(dataObj)
 this.$store.dispatch("saveGrid", gridData)
 
 

//...

use globals

// component ...
// can error and only serves the purpose of an idea
computed: 
 gridData: 
 get: function() 
 ,
 set: function(dataObj)
 window.gridData = dataObj