Is it possible to share state between different pages?

[lianggecm]

For example in this two-page design, state from page 1 and page 2 are independent. Is there a way to share the states?

@me.stateclass
class State:
  count:int = 0

@me.page(path="/1")
def page1():
    state=me.state(State)
    state.count=10
    me.text(str(state.count))

@me.page(path="/2")
def page2():
    state=me.state(State)
    me.text(str(state.count))```

[wwwillchen]

Yes, you can share state using the example you've shown. When you use me.state(State) you are getting the same instance across the different pages.

On a side note, i wouldn't mutate state inside a component function, i.e. state.count=10, you should do mutations in an event handler function.

[lianggecm]

Thank you very much for your reply.

The issue is that state apparently is not shared between pages 1 and 2. Here's the result from my demo:

[wwwillchen]

Each time you do me.colab_show (i.e. a new cell output), you're creating a new session so the state isn't shared across the cell outputs.

If you really want to share state across sessions (this isn't recommended if you have multiple users for your app, but it may be OK if you're working on a colab notebook by yourself), you can use a top-level/static Python variable, e.g. count = 0.

[lianggecm]

I tried both colab and local and couldn't get it to work.

Here's the code:

import mesop as me

@me.stateclass
class State:
  count:int = 0

def on_load(e: me.LoadEvent):
  state=me.state(State)
  state.count=10
  
@me.page(path="/1", on_load=on_load)
def page1():
    state=me.state(State)
    state.count=10
    me.text(str(state.count))

@me.page(path="/2")
def page2():
    state=me.state(State)
    me.text(str(state.count))
    
@me.page(path='/main')    
def main_page():
  with me.box():
    me.text('State from page 1')
    me.embed(src='/1')
  with me.box():
    me.text('State from page 2')
    me.embed(src='/2')

And here's the outcome:

[Maki0806]

I think that the following codes may share values between different pages.

import mesop as me


@me.stateclass
class State:
    count: int = 0


def on_load(e: me.LoadEvent):
    state = me.state(State)
    state.count = page1_count


@me.page(path="/1")
def page1():
    state = me.state(State)
    state.count = 10
    global page1_count
    page1_count = state.count
    me.text(str(state.count))


@me.page(path="/2", on_load=on_load)
def page2():
    state = me.state(State)
    me.text(str(state.count))

The global variable can store the state value, which can be reused on different pages by running on_load. However, I am not sure that this solution is the best in mesop.