1  import { defineStore } from 'pinia'
 2  import { useI18n } from 'vue-i18n'
 3  
 4  type LocaleObjectType = {
 5    title: string
 6    value: string
 7    name: string
 8    src: string
 9  }
10  
11  interface LocaleStoreState {
12    selected: string | undefined
13    list: LocaleObjectType[]
14    fallback: LocaleObjectType
15  }
16  
17  export const useLocaleStore = defineStore('localeStore', {
18    state: () =>
19      ({
20        selected: undefined,
21        // Sourced from the 'flag-icons' npm package
22        list: [
23          { title: 'English', value: 'en', name: 'united-states', src: 'flags/us.svg' },
24          { title: '简体中文', value: 'zh', name: 'china', src: 'flags/cn.svg' }
25        ],
26        fallback: { title: 'English', value: 'en', name: 'united-states', src: 'flags/us.svg' }
27      }) as LocaleStoreState,
28    getters: {},
29    persist: {
30      include: ['selected']
31    },
32    actions: {
33      getLocale() {
34        const { locale } = useI18n()
35        return locale.value
36      },
37      change(lang: string) {
38        const { locale } = useI18n()
39        locale.value = lang
40      },
41      getIcon() {
42        const value = this.getLocale()
43        const item = this.list.find((lang) => lang.value === value) || this.fallback
44        return item.src
45      }
46    }
47  })