OWL ‐ Store Pattern - vec-ltd/odoo-docs GitHub Wiki

Rationale

I highly recommend using the reactive store pattern in order to share state across multiple components without having to pass props around.

Create a store class

You will need a class that looks something like this: const { reactive } = owl;

class Store {
  sharedState = "blah"
}

export const store = reactive(new Store());

Then in your components:

import { store } from '../store.js'

class ComponentA {

  store = useState(store)

  onButtonClick() {
    this.store.sharedState = "newValue"
  }
}

class ComponentB {
  
  store = useState(store)

  static template = xml`
    <div t-esc="store.sharedState"/>
  `
}

You must use the useState helper so that the store becomes reactive.

So if the event is fired on ComponentA and it updates the value, then ComponentB would reflect that change.