How to initialise a store, pre vue build

[bobmcallan]

I'm using Vue 3 with composition API for majority of components/views.

I'd like to understand how it is possible to initialise a store when the Vue application is created. My scenario is simple:

1. The userStore initialises from a localstorage user token
   -> if exists validate with api, fill user state and proceed
   -> if not exists fill user state (false) and proceed (login)
2. Other stores watch fro a valid user token, and initiate their initialisation functions, such as get more user details.

I've used Vuex to initialise in const app = createApp({ created() { this.$store.dispatch("userinit"); } }) . However as the Pinia stores are not initialised globally @startup, rather only when added to a component (?) I don't know how to implement this logic.

How to achieve?

Bob

[posva]

You can do

const app = createApp({
  setup() {
    const store = useGlobalStore()
    store.userInit()
  }
})

this is equivalent to what you were doing in Vuex:

const app = createApp({ created() { this.$store.dispatch("userinit"); } })

[bobmcallan]

Thanks I ended up creating an onBeforeMount() with in the app.vue as I had to accomodate async and provide application loading.

setup() {
      const user = userStore();
      const configuration = configurationStore();

      configuration.applicationLoading()

      onBeforeMount(async () => {

          await configuration.initalise();
          await user.initalise();

          configuration.applicationLoaded()

      });

 return {
                isApplicationLoading: computed(() => configuration.isApplicationLoading),
                isAuthenticated: computed(() => user.isAuthenticated),
}