Initialize state with calling an action that makes an API call

[mpont91]

My use case is storing all available languages.

So my store looks like:

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { useSystemLanguageService } from '@/core/services/systemService'

export const useLanguagesStore = defineStore({
  id: 'languages',
  state: () => ({
    languages: ref([]),
  }),
  actions: {
    loadFromApi() {
     useSystemLanguageService()
        .then((response) => {
          this.languages = response.result
        })
        .catch((error) => {
          return Promise.reject(new Error(error))
        })
    },
  },
})

The problem is, when I need to use this store on a component I should do:

import { useLanguagesStore } from '@/core/stores/languagesStore'
const languages = useLanguagesStore()
languages.loadFromApi()

Calling the loadFromApi action and making the HTTP request every time I need the languages...

I can fix the multiple API calls updating the loadFromApi actions with:

loadFromApi() {
  if (this.languages.length > 0) {
    useSystemLanguageService()
      .then((response) => {
        this.languages = response.result
      })
      .catch((error) => {
        return Promise.reject(new Error(error))
      })
  }
},

but I don't quite like the solution, I have to keep calling the loadFromApi actions every time I need the store.

Is there no hook to initialize? Something like this would be nice:

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { useSystemLanguageService } from '@/core/services/systemService'

export const useLanguagesStore = defineStore({
  id: 'languages',
  state: () => ({
    languages: ref([]),
  }),
  actions: {
    loadFromApi() {
      useSystemLanguageService()
        .then((response) => {
          this.languages = response.result
        })
        .catch((error) => {
          return Promise.reject(new Error(error))
        })
    },
  },
  initialize() {
    this.loadFromApi()
  },
})

Or is there another way?
summing up, what I would need is, using this store on a component like:

import { useLanguagesStore } from '@/core/stores/languagesStore'
const languages = useLanguagesStore()

And the store has the logic to initialize himself doing the loadFromApi action only when it has no languages stored.

[dreambo8563]

@mpont91 I am trying to have a wrapper as a solution, any place using const xx = useDemoStore() won't need to change. all usage will be the same as normal store

export const useDemoStore = () => {
  const innerStore = defineStore({
    id: "demo",
    state: () => ({
      counter: 0,
    }),

    actions: {
      asyncList() {
        console.info("asyncList");
        setTimeout(() => {
          this.counter = 100;
        }, 1000);
      },
    },
  });
  const s = innerStore();
  if (s.counter == 0) {
    s.asyncList();
  }
  return s;
};

[tmountjr]

One thing I found with HMR (https://pinia.vuejs.org/cookbook/hot-module-replacement.html) was that after I wrapped my store in a function so I could initialize some external data, I had to do this:

export const useMyStore = () => {
  const innerStore = defineStore('my.store', () => { ... }
  const s = innerStore()
  // Do init stuff

  if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(innerStore, import.meta.hot))
  }

  return  s
}

Basically had to move the acceptHMRUpdate block up into the function rather than outside of it.

[katerlouis]

@tmountjr Interesting; I stumbled upon a similar issue a few weeks ago and didn't think acceptHRMUpdate could be moved inside the function. It's odd to me that HMR has to be created specifically by hand in the first place... but have you found any drawbacks or issues with that method?

[tmountjr]

Not really, but I wasn't stress-testing it all that much. It didn't break anything; whether or not it works as it should I don't really know.

[skjnldsv]

A quick addition, passing arguments to the store init should be done to ensure the useStore wrapper really act like onet:

export const useFilesStore = function() {
	const store = defineStore('files', {
		state: (): FilesState => ({
			// define some state
		}),
		actions: {
			onDeletedNode(node: Node) {
				// do something
			},
		}
	})

	const fileStore = store(...arguments)

	// Make sure we only register the listeners once
	if (!fileStore._initialized) {
		subscribe('files:node:deleted', fileStore.onDeletedNode)
		fileStore._initialized = true
	}

	return fileStore
}

[yuya737]

I'm trying to do something similar (I have a store that gets initialize via a API and asynchronous) and I came across this promising post.

But, apologies if I'm mistaken, but with the logic below:

const s = innerStore();
  if (s.counter == 0) {
    s.asyncList();
  }
  return s;

how are we guaranteeing the data exists when an action gets called on s elsewhere?

[mcelligottnick]

@dreambo8563 when I do this, I get a type error in my computer mapState and mapActions functions;

import { useAdminAnnouncementsStore } from '@/stores/adminAnnouncement';

computed: {
    ...mapState(useAdminAnnouncementsStore, ['announcements', 'innactiveAnnouncementsLoaded']),
},

Error:
No overload matches this call.
Overload 1 of 2, '(useStore: StoreDefinition<"adminAnnouncement", { announcements: Announcement[]; innactiveAnnouncementsLoaded: boolean; spaces: Space[]; }, {}, { initStore(): Promise; loadAnnouncements(includeInactive?: boolean): Promise<...>; remove(announcement: Announcement): Promise<...>; }>, keyMapper: Record<...>): _MapStateObjectReturn<...>', gave the following error.
Overload 2 of 2, '(useStore: StoreDefinition<"adminAnnouncement", { announcements: Announcement[]; innactiveAnnouncementsLoaded: boolean; spaces: Space[]; }, {}, { initStore(): Promise; loadAnnouncements(includeInactive?: boolean): Promise<...>; remove(announcement: Announcement): Promise<...>; }>, keys: readonly ("innactiveAnnouncementsLoaded" | "announcements")[]): _MapStateReturn<...>', gave the following error.ts(2769)

[theoephraim]

some related discussion here about adding more hooks to stores - with ideally the functionality to know when the store is no longer being used...