[Luigi Container] Share Pinia Store

[BossHogg97]

Hi, i'm looking for a solution to share a Pinia store from Luigi Core app to Luigi Client. Both Core and Client app are developed with Vue3 framework.

Thanks

[ndricimrr]

Hi @BossHogg97 ,
Converted the issue to a discussion as it seems more suited for that instead.

I am not familiar with the Pinia store, however it seems like you are trying to transfer some data from Core to Client app.
The type of framework/store you are using to manage your data/state management mechanism should not be a problem here (as long as it is Javascript based).

Therefore I could see this issue abstracted into simply Core -> Client communication. For this we have a dedicated section in our documentation that I encourage you to have a look at Core-Client Communication

In essence, you are sending a message from the Core to the Client microfrontend (and back if necessary).

Note that the particular Core -> Client communication mechanism in this case is based underneath on iframe-iframe message passing mechanism. (The client microfrontend/s in this case is hosted under an iframe wheres the Core here would be its parent)

So whether you are using Redux store in your React application, ngrx/store for your Angular ones or Pinia store for VueJs, in all cases this converges then into iframe message communication underneath. Looking at the examples in the documentation link above should give you an idea on how to approach your problem for sharing the state.

Specific links and functions to get you started:

• Luigi Core's customMessages().sendToAll(...)
• Luigi Client's addCustomMessageListener(...)
• Luigi Client's sendCustomMessage(...)

[BossHogg97]

I tried your solution and it work fine. In the Luigi Client i used a setInterval for check possible context update. Is there a better way or Luigi Client API that look for context update?

setInterval(() => {
  const receivedContext1 = LuigiClient.getContext()
  console.log('receivedContext1: ', receivedContext1)
}, 5001)

On Core application i update the context only once i receive an event with new token

// Define variable for get component ref
const myLuigiContainer = ref(null)

evtUpdateContext.on((newToken) => {
    myLuigiContainer.value.updateContext({
      token: newToken,
    })
  })

[ndricimrr]

Hi,
You can use a context update listener on the Luigi Client side:
// you can use the id in case you ever need to remove the listener

const updateListenerId = LuigiClient.addContextUpdateListener((context) => {
        console.log('receivedContext: ', context)
        // do something with received context
})

[BossHogg97]

It work! Thanks!!

Just for know. Is there a place where there is a list of available function usable with container reference?

[ndricimrr]

Glad that helped. We're in the process of polishing that list up into the documentation, but at the moment you may have a look here

[BossHogg97]

Very nice! I saw that the doc related to container "version" is small at the moment :(