Retaining component state on page change

[john-]

This might be a Rust question but I am new enough to all this I cannot say for sure.

I create an application like this:

cargo leptos new --git leptos-rs/start-axum

I then add a route to get back to the counter page:

        <nav>
          <A href="">"Home"</A>   // code I added

          // LR will enhance the active <a> link with the [aria-current] attribute
          // we can use this for styling them with CSS like `[aria-current] { font-weight: bold; }`
          <A href="contacts">"Contacts"</A>
          // But we can also use a normal class attribute like it is a normal component
          <A href="settings" class="my-class">"Settings"</A>
          // It also supports signals!
          <A href="about" class=move || "my-class">"About"</A>
        </nav>

If I increment the counter, then go to another page and then back the counter is reset to zero. I would like it to retain the count.

Of course HomePage() is a function so that is expected. However, it is not clear how I retain the state of count across page changes.

The section in the book on Global State Management indicates "So far, we've only been working with local state in components". However, I don't see that in a way that makes sense to me.

The section on The Life Cycle of a Signal makes it clear components are just function calls which makes me think some kind of static(?) variable is needed.

Any pointers as to how I should address this?

[gbj]

So this is working as designed and the way any reasonable framework would work: when you navigate away from the page, it releases any memory allocated on that page (rather than just leaking memory as you navigate page to page).

A good way to share state between different pages would be to "hoist" it up into a higher scope, and then share it with the child.

In your example, you would pull the count signal up into the scope of the App component instead of the page it's on, so that it is created once during the life of the app: then pass it as a prop or using context.

Note that for the Route view prop, view can be any function including a closure, so you can do something like view=move || view! { <CounterPage count /> } if you want to pass it as a prop rather than using context.

[john-]

Makes sense and thanks for all the detail.