On reopening of tab with Vue + Ionic

Hi everyone,

I have a view that loads some data when mounted. Trying to port from Vue to Vue + Ionic, I have implemented this view as a Tab.

Thus, if this tab is opened it is mounted. However, when I then open another tab and go back to this tab, it is no re-mounted. I would like to implement some kind of logic that determines if the view should reload the data, because it has not updated for a while.

Is there a lifecycle event that I should use instead of mounted? Or any other approach?

You can determine if the properties have changed and reload the data? Would need to better understand what you are doing to provide a more complete and specific answer.

You could also listen for the change tab event and trigger the data update from the parent container.

I basically need to trigger some logic that is now in mounted (), every time the tab is opened/activated.

For example: when the tab was opened, some data loaded. Then another tab is opened. After a long time the first tab is opened again, but the data in there is now old and I need to fetch it again.

if you are using a state manager or a reactive store, the pages would be getting updated automatically… see “composition api” for more information.

See here how I manage user state reactively in this example.

any where i use this…
let { user, loading, error } = useAuth();

that component will have access to the latest user object, and when it changes, it will be updated in all locations

Source: https://github.com/aaronksaunders/vue-composition-firebase-app-2/blob/f479cc9a272a1aa8d4af9704664214d534cf6251/src/use-auth.js