[Vuejs]-Vue reactivity fails when navigating back to the page

by

0👍

Well, to be honest, I have some suggestions depending on which version of vue you are using. For example, if you are using Vue2 or Vue3 with the cli, your state management problems can be solved with Vuex (however at this point vuex is not the officially recommended state management system anymore). The best solution, if you’re using Vue3, is to go with Pinia https://pinia.vuejs.org which is very helpful, modern, and surprisingly easier to learn and use, compared to Vuex.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
localStorage is an alternate solution, but the tradeoff is that you will have to write code to erase that localStorage.

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
sessionStorage is similar to localStorage but will automatically erase the data after the window closes.

0👍

I solved the issue by manually reloading the page when a user visits the page using the browser back/forward buttons. The following code snippet does it:

<script>
    if (performance) {
        // get the PerformanceNavigationTiming object
        const perfEntries = performance.getEntriesByType("navigation");
        const perfNavTiming = perfEntries && perfEntries[0];

        if (perfNavTiming) {
            // get the type of navigation
            const navType = perfNavTiming.type;

            // reload if it is back_forward or prerender.
            if ((navType === "back_forward") ||
                (navType === "prerender")) {
                window.location.reload();
            }
        }
    }

</script>

It is not the neatest solution, but I guess I should go for it, given my time limit. I guess some learning is required before I can use the suggested solutions using localStorage, sessionStorage, and Piani, as I am not sure how to use these techniques to re-initiate the Vue two-way binding.

Leave a comment