✨ Feature(custom): update i18n force update

src/renderer/App.vue

@@ -1,19 +1,20 @@
 <template>
-  <div id="app">
+  <div
+    id="app"
+    :key="pageReloadCount"
+  >
     <router-view />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useStore } from '@/hooks/useStore'
 import type { IConfig } from 'piclist'
-import { onBeforeMount, onMounted, onUnmounted } from 'vue'
+import { onBeforeMount } from 'vue'
 
+import { useStore } from '@/hooks/useStore'
 import { useATagClick } from '@/hooks/useATagClick'
-import bus from '@/utils/bus'
 import { getConfig } from '@/utils/dataSender'
-
-import { FORCE_UPDATE } from '#/events/constants'
+import { pageReloadCount } from '@/utils/global'
 
 useATagClick()
 const store = useStore()
@@ -25,16 +26,6 @@ onBeforeMount(async () => {
   }
 })
 
-onMounted(() => {
-  bus.on(FORCE_UPDATE, () => {
-    store?.updateForceUpdateTime()
-  })
-})
-
-onUnmounted(() => {
-  bus.off(FORCE_UPDATE)
-})
-
 </script>
 
 <script lang="ts">

src/renderer/i18n/index.ts

@@ -1,12 +1,12 @@
 import { ipcRenderer } from 'electron'
 import { ObjectAdapter, I18n } from '@picgo/i18n'
 
-import bus from '@/utils/bus'
-import { sendRPC } from '@/utils/common'
+import { sendRPC, sendRpcSync } from '@/utils/common'
 
-import { GET_CURRENT_LANGUAGE, SET_CURRENT_LANGUAGE, FORCE_UPDATE, GET_LANGUAGE_LIST } from '#/events/constants'
+import { SET_CURRENT_LANGUAGE } from '#/events/constants'
 import { builtinI18nList } from '#/i18n'
 import { IRPCActionType } from '#/types/enum'
+import { updatePageReloadCount } from '@/utils/global'
 
 export class I18nManager {
   #i18n: I18n | null = null
@@ -17,23 +17,17 @@ export class I18nManager {
     this.#getLanguageList()
     ipcRenderer.on(SET_CURRENT_LANGUAGE, (_, lang: string, locales: ILocales) => {
       this.#setLocales(lang, locales)
-      bus.emit(FORCE_UPDATE)
+      updatePageReloadCount()
     })
   }
 
   #getLanguageList () {
-    sendRPC(IRPCActionType.GET_LANGUAGE_LIST)
-    ipcRenderer.once(GET_LANGUAGE_LIST, (_, list: II18nItem[]) => {
-      this.#i18nFileList = list
-    })
+    this.#i18nFileList = sendRpcSync(IRPCActionType.GET_LANGUAGE_LIST)
   }
 
   #getCurrentLanguage () {
-    sendRPC(IRPCActionType.GET_CURRENT_LANGUAGE)
-    ipcRenderer.once(GET_CURRENT_LANGUAGE, (_, lang: string, locales: ILocales) => {
-      this.#setLocales(lang, locales)
-      bus.emit(FORCE_UPDATE)
-    })
+    const [lang, locales] = sendRpcSync(IRPCActionType.GET_CURRENT_LANGUAGE)
+    this.#setLocales(lang, locales)
   }
 
   #setLocales (lang: string, locales: ILocales) {

src/renderer/store/index.ts

@@ -1,4 +1,4 @@
-import { reactive, InjectionKey, readonly, App, UnwrapRef, ref } from 'vue'
+import { reactive, InjectionKey, readonly, App, UnwrapRef } from 'vue'
 import { saveConfig } from '@/utils/dataSender'
 import { configPaths } from '#/utils/configPaths'
 
@@ -9,7 +9,6 @@ export interface IState {
 export interface IStore {
   state: UnwrapRef<IState>
   setDefaultPicBed: (type: string) => void
-  updateForceUpdateTime: () => void
 }
 
 export const storeKey: InjectionKey<IStore> = Symbol('store')
@@ -19,8 +18,6 @@ const state: IState = reactive({
   defaultPicBed: 'smms'
 })
 
-const forceUpdateTime = ref<number>(Date.now())
-
 // methods
 const setDefaultPicBed = (type: string) => {
   saveConfig({
@@ -30,17 +27,11 @@ const setDefaultPicBed = (type: string) => {
   state.defaultPicBed = type
 }
 
-const updateForceUpdateTime = () => {
-  forceUpdateTime.value = Date.now()
-}
-
 export const store = {
   install (app: App) {
     app.provide(storeKey, {
       state: readonly(state),
-      setDefaultPicBed,
-      updateForceUpdateTime
+      setDefaultPicBed
     })
-    app.provide('forceUpdateTime', forceUpdateTime)
   }
 }

src/renderer/utils/bus.ts

@@ -1,8 +1,7 @@
 import mitt from 'mitt'
 import {
   SHOW_INPUT_BOX,
-  SHOW_INPUT_BOX_RESPONSE,
-  FORCE_UPDATE
+  SHOW_INPUT_BOX_RESPONSE
 } from '#/events/constants'
 
 type IEvent ={
@@ -11,8 +10,7 @@ type IEvent ={
     value: string
     title: string
     placeholder: string
-  },
-  [FORCE_UPDATE]: void
+  }
 }
 
 const emitter = mitt<IEvent>()

src/renderer/utils/common.ts

@@ -51,6 +51,11 @@ export function sendRPC (action: IRPCActionType, ...args: any[]): void {
   ipcRenderer.send(RPC_ACTIONS, action, data)
 }
 
+export function sendRpcSync (action: IRPCActionType, ...args: any[]) {
+  const data = getRawData(args)
+  return ipcRenderer.sendSync(RPC_ACTIONS, action, data)
+}
+
 export function invokeToMain (channel: string, ...args: any[]) {
   const data = getRawData(args)
   return ipcRenderer.invoke(channel, ...data)

src/renderer/utils/global.ts

@@ -4,13 +4,20 @@ import { IRPCActionType } from '#/types/enum'
 
 const osGlobal = ref<string>(process.platform)
 const picBedGlobal = ref<IPicBedType[]>([])
+const pageReloadCount = ref(0)
 
 async function updatePicBedGlobal () {
   picBedGlobal.value = (await triggerRPC<IPicBedType[]>(IRPCActionType.MAIN_GET_PICBED))!
 }
 
+async function updatePageReloadCount () {
+  pageReloadCount.value++
+}
+
 export {
   osGlobal,
+  pageReloadCount,
   picBedGlobal,
-  updatePicBedGlobal
+  updatePicBedGlobal,
+  updatePageReloadCount
 }

src/renderer/utils/mainMixin.ts

@@ -1,24 +0,0 @@
-import { ComponentOptions } from 'vue'
-
-import bus from '@/utils/bus'
-
-import { FORCE_UPDATE } from '#/events/constants'
-
-export const mainMixin: ComponentOptions = {
-  inject: ['forceUpdateTime'],
-
-  created () {
-    // FIXME: may be memory leak
-    this?.$watch('forceUpdateTime', (newVal: number, oldVal: number) => {
-      if (oldVal !== newVal) {
-        this?.$forceUpdate()
-      }
-    })
-  },
-
-  methods: {
-    forceUpdate () {
-      bus.emit(FORCE_UPDATE)
-    }
-  }
-}