refs #3301 Rewrite Preferences/Language with composition API

src/constants/language/index.d.ts

@@ -12,6 +12,7 @@ export type LanguageList = {
   ja: LanguageType
   ko: LanguageType
   pl: LanguageType
+  id: LanguageType
   it: LanguageType
   zh_cn: LanguageType
   zh_tw: LanguageType

src/renderer/components/Preferences/Language.vue

@@ -30,73 +30,79 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, computed, onMounted } from 'vue'
+import { useI18next } from 'vue3-i18next'
+import { ElMessage } from 'element-plus'
+import { useStore } from '@/store'
 import Language from '~/src/constants/language'
+import { ACTION_TYPES } from '@/store/Preferences/Language'
 
-export default {
+export default defineComponent({
   name: 'language',
-  data() {
-    return {
-      languages: [
-        Language.cs,
-        Language.de,
-        Language.en,
-        Language.es_es,
-        Language.fr,
-        Language.gd,
-        Language.id,
-        Language.it,
-        Language.ja,
-        Language.ko,
-        Language.no,
-        Language.pl,
-        Language.pt_pt,
-        Language.ru,
-        Language.si,
-        Language.sv_se,
-        Language.tzm,
-        Language.zh_cn,
-        Language.zh_tw
-      ]
-    }
-  },
-  computed: {
-    displayLanguage: {
-      get() {
-        return this.$store.state.Preferences.Language.language.language
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Language/changeLanguage', value).then(key => {
-          this.$i18n.locale = key
+  setup() {
+    const space = 'Preferences/Language'
+    const store = useStore()
+    const i18n = useI18next()
+
+    const languages = [
+      Language.cs,
+      Language.de,
+      Language.en,
+      Language.es_es,
+      Language.fr,
+      Language.gd,
+      Language.id,
+      Language.it,
+      Language.ja,
+      Language.ko,
+      Language.no,
+      Language.pl,
+      Language.pt_pt,
+      Language.ru,
+      Language.si,
+      Language.sv_se,
+      Language.tzm,
+      Language.zh_cn,
+      Language.zh_tw
+    ]
+
+    const displayLanguage = computed({
+      get: () => store.state.Preferences.Language.language.language,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.CHANGE_LANGUAGE}`, value).then(key => {
+          i18n.changeLanguage(key)
         })
-      }
-    },
-    spellcheck: {
-      get() {
-        return this.$store.state.Preferences.Language.language.spellchecker.enabled
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Language/toggleSpellchecker', value)
-      }
-    },
-    spellcheckLanguages: {
-      get() {
-        return this.$store.state.Preferences.Language.language.spellchecker.languages
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Language/updateSpellcheckerLanguages', value).catch(() => {
-          this.$message({
-            message: this.$t('message.language_not_support_spellchecker_error'),
+    })
+
+    const spellcheck = computed({
+      get: () => store.state.Preferences.Language.language.spellchecker.enabled,
+      set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.TOGGLE_SPELLCHECKER}`, value)
+    })
+
+    const spellcheckLanguages = computed({
+      get: () => store.state.Preferences.Language.language.spellchecker.languages,
+      set: (value: Array<string>) =>
+        store.dispatch('Preferences/Language/updateSpellcheckerLanguages', value).catch(() => {
+          ElMessage({
+            message: i18n.t('message.language_not_support_spellchecker_error'),
             type: 'error'
           })
         })
-      }
+    })
+
+    onMounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.LOAD_LANGUAGE}`)
+    })
+
+    return {
+      languages,
+      displayLanguage,
+      spellcheck,
+      spellcheckLanguages
     }
-  },
-  created() {
-    this.$store.dispatch('Preferences/Language/loadLanguage')
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/Preferences/Account.ts

@@ -39,21 +39,21 @@ export const ACTION_TYPES = {
 }
 
 const actions: ActionTree<AccountState, RootState> = {
-  loadAccounts: async ({ commit }): Promise<Array<LocalAccount>> => {
+  [ACTION_TYPES.LOAD_ACCOUNTS]: async ({ commit }): Promise<Array<LocalAccount>> => {
     const accounts = await win.ipcRenderer.invoke('list-accounts')
     commit(MUTATION_TYPES.UPDATE_ACCOUNTS, accounts)
     return accounts
   },
-  removeAccount: async (_, account: LocalAccount) => {
+  [ACTION_TYPES.REMOVE_ACCOUNT]: async (_, account: LocalAccount) => {
     await win.ipcRenderer.invoke('remove-account', account._id)
   },
-  forwardAccount: async (_, account: LocalAccount) => {
+  [ACTION_TYPES.FORWARD_ACCOUNT]: async (_, account: LocalAccount) => {
     await win.ipcRenderer.invoke('forward-account', toRaw(account))
   },
-  backwardAccount: async (_, account: LocalAccount) => {
+  [ACTION_TYPES.BACKWARD_ACCOUNT]: async (_, account: LocalAccount) => {
     await win.ipcRenderer.invoke('backward-account', toRaw(account))
   },
-  removeAllAccounts: async () => {
+  [ACTION_TYPES.REMOVE_ALL_ACCOUNTS]: async () => {
     await win.ipcRenderer.invoke('remove-all-accounts')
   }
 }

src/renderer/store/Preferences/Language.ts

@@ -5,7 +5,7 @@ import { Language as LanguageSet } from '~/src/types/language'
 import { BaseConfig } from '~/src/types/preference'
 import { MyWindow } from '~/src/types/global'
 
-const win = (window as any) as MyWindow
+const win = window as any as MyWindow
 
 export type LanguageState = {
   language: LanguageSet
@@ -43,23 +43,30 @@ const mutations: MutationTree<LanguageState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  LOAD_LANGUAGE: 'loadLanguage',
+  CHANGE_LANGUAGE: 'changeLanguage',
+  TOGGLE_SPELLCHECKER: 'toggleSpellchecker',
+  UPDATE_SPELLCHECKER_LANGUAGES: 'updateSpellcheckerLanguages'
+}
+
 const actions: ActionTree<LanguageState, RootState> = {
-  loadLanguage: async ({ commit }): Promise<string> => {
+  [ACTION_TYPES.LOAD_LANGUAGE]: async ({ commit }): Promise<string> => {
     const conf: BaseConfig = await win.ipcRenderer.invoke('get-preferences')
     commit(MUTATION_TYPES.UPDATE_LANGUAGE, conf.language as LanguageSet)
     return conf.language.language
   },
-  changeLanguage: async ({ commit }, key: string): Promise<string> => {
+  [ACTION_TYPES.CHANGE_LANGUAGE]: async ({ commit }, key: string): Promise<string> => {
     const value: string = await win.ipcRenderer.invoke('change-language', key)
     commit(MUTATION_TYPES.CHANGE_LANGUAGE, value)
     return value
   },
-  toggleSpellchecker: async ({ commit }, enabled: boolean) => {
+  [ACTION_TYPES.TOGGLE_SPELLCHECKER]: async ({ commit }, enabled: boolean) => {
     const value: boolean = await win.ipcRenderer.invoke('toggle-spellchecker', enabled)
     commit(MUTATION_TYPES.TOGGLE_SPELLCHECKER, value)
     return value
   },
-  updateSpellcheckerLanguages: async ({ commit }, languages: Array<string>) => {
+  [ACTION_TYPES.UPDATE_SPELLCHECKER_LANGUAGES]: async ({ commit }, languages: Array<string>) => {
     const langs: Array<string> = await win.ipcRenderer.invoke('update-spellchecker-languages', languages)
     commit(MUTATION_TYPES.UPDATE_SPELLCHECKER_LANGUAGES, langs)
     return langs