Load Pinia Setup Actions from external lib

[francisco-alonso]

Hello,

I'm trying to load the setup of a pinia store from an external module (loaded through importmaps ) for reusability
For example this is the store setup:

import { markRaw, reactive } from 'vue';

const useStore = () => {
  const state = reactive({
    prop: false,
  });

  const open = () => {
    state.prop = true
}

return {
  state,
  open
}
}

When I load the setup and pass it directly to the store definition, I arrive to execute the action and mutate the state but the UI remains in the same state.

Should I load the pure function after the pinia instance creation? Any suggestions?

Thanks,

[nunoraposo33]

Is this the same issue as #2551 ?

[francisco-alonso]

Thanks, but my Vue version is 3.3.4 so it's not related

[nunoraposo33]

Front the example code I could not deduce that. Can you provide the rest of the code or a playgroup?

[francisco-alonso]

Hello Nuno,

Thank you, this is the store setup definition:

import { markRaw, reactive } from 'vue';

const useStore = () => {
  const state = reactive({
    prop: false,
  });

  const open = () => {
    state.prop = true
}

return {
  state,
  open
}
}

This store is exported from a common module and loaded in a SystemJS register trough a importmaps into my frontend.

Then, in one of my microfrontends I import the module passing it to my store defintion:

import { useStore} from 'library';

const useAppStore = defineStore('store', useStore);

export default useAppStore;

I execute the action but non reactivity. Maybe, I should extract the setup action differently.

[francisco-alonso]

Hello, in the end I was able to load the setup actions through importmaps. In my case, I am working with a structure of microfrontends so each mfe should implement the same definition to get aligned.

Let's say I want to share the implementation of a Notification Service (common to all microfrontends):

1. From my lib I will export the actions setup as:

export interface NotificationState {
  message: string | null;
  type: 'success' | 'information' | 'warning' | 'error' | null;
  isOpen?: boolean | null;
  canClose?: boolean | null;
  duration?: number | null;
  actionText?: string | null;
  icon?: string | null;
}

export const initialState: NotificationState = {
  message: null,
  type: null,
};

export const useNotificationSetupActions = {
  id: 'notificationStore',
  state: () => ({
    message: null,
    type: null,
    isOpen: false,
    actionText: null,
    icon: null,
  }),
  actions: {
    setNotification(payload: NotificationState): void {
      this.message = payload.message;
      this.type = payload.type;
      this.isOpen = true;
      this.duration = payload.duration || 5000;
      this.actionText = payload.actionText;
      this.icon = payload.icon;
      this.canClose = payload.canClose;
    },

    clearNotification(): void {
      this.message = null;
      this.type = null;
      this.isOpen = false;
      this.actionText = null;
      this.icon = null;
      this.canClose = null;
      this.duration = 5000;
    },
  },
};

Then, I will also have to share the presentational component:

NotificationHost.vue

<template>
  <se-snackbar
    v-if="notificationState.isOpen"
    data-testid="global-notification-snackbar"
    :open="notificationState.isOpen"
    :type="notificationState.type"
    :message="notificationState.message"
    :icon="notificationState.icon"
    :action-text="notificationState.actionText"
    @didclose="emit('onClearNotification')"
    duration="5000"
  >
  </se-snackbar>
</template>

<script lang="ts" setup>
import { NotificationState } from '@/services/stores/NotificationStore';

interface Props {
  notificationState: NotificationState;
}

const { notificationState } = defineProps<Props>();

const emit = defineEmits<{
  onClearNotification: [];
}>();
</script>

Both the setup actions and the presentational component will be exported from my lib and loaded in each microfrontend as importmaps from a SystemJS register.

2. Load exposed service and component in a microfrontend:

First, we need to import the setup actions when defining the store:

import { NotificationState } from '@/models/notifications/globalNotifications.interfaces';
_**import { useNotificationSetupActions } from '@my-lib';**_
import { defineStore } from 'pinia';

export const initialState: NotificationState = {
  message: null,
  type: null,
};

interface Actions {
  setNotification: (payload: NotificationState) => void;
  clearNotification: () => void;
}

export const useNotificationStore = defineStore<string, NotificationState, any, Actions>(
  'notificationStore',
  useNotificationSetupActions,
);

Second, we need to register the exposed component in my app. As said, this is loaded through importmaps too:

app.component('NotificationHost', NotificationHost)

Third, we can declare the component directly at root level in theApp.vue and pass down the store state:

<template>
  <se-app>
    <ComputationApp />
    <NotificationHost :notification-state="notificationState" @on-clear-notification="clearNotification" />
  </se-app>
</template>

<script setup lang="ts">
import Appfrom '@/pages/App.vue';
import { useNotificationStore } from '@/store/notificationStore/NotificationStore';

const { $state: notificationState, clearNotification } = useNotificationStore();
</script>

As you can see, the component is registered in the main so no need to import it.

To conclude:

• Number of common stores = number of microfrontends
• Only one implementation of the setup actions, common to every mfe
• Only one Host

Open to improvements and suggestions!

Thank you,