refactor: 切换语言指令优化

src/directives/language.ts

@@ -2,35 +2,46 @@ import { watchEffect, DirectiveBinding } from 'vue'
 import { useStore } from '@/store'
 import { chineseLanguageLoader } from '@/i18n/util'
 
+interface MyHtmlElement extends HTMLElement {
+  stopHandler: (() => void) | null
+}
+
 /*
  ep:v-language:title="state.obj"
 */
 
-export default (el: HTMLElement, binding: DirectiveBinding) => {
-  watchEffect(() => {
-    const store = useStore()
-    const language = store.language
-    const { arg, value } = binding
-
-    let content = ''
-
-    if (!Object.keys(value)?.length || !arg) {
-      return
+export default {
+  mounted(el: MyHtmlElement, binding: DirectiveBinding) {
+    if (el.stopHandler) {
+      el.stopHandler()
+      el.stopHandler = null
     }
+    el.stopHandler = watchEffect(() => {
+      const store = useStore()
+      const language = store.language
+      const { arg, value } = binding
 
-    if (language === 'zh') {
-      content = value[arg]
-    }
-
-    if (language === 'en' && value[arg + 'En']) {
-      content = value[arg + 'En']
-    } else if (language === 'en' && !value[arg + 'En']) {
-      content = value[arg]
-    }
+      if (!Object.keys(value)?.length || !arg) {
+        return ''
+      }
 
-    if (language === 'tw') {
-      content = chineseLanguageLoader(value[arg])
-    }
-    el.innerHTML = content
-  })
+      let content = ''
+      if (language === 'zh') {
+        content = value[arg]
+      }
+      if (language === 'en' && value[arg + 'En']) {
+        content = value[arg + 'En']
+      } else if (language === 'en' && !value[arg + 'En']) {
+        content = value[arg]
+      }
+      if (language === 'tw') {
+        content = chineseLanguageLoader(value[arg])
+      }
+      el.innerHTML = content
+    })
+  },
+  beforeUnmount(el: MyHtmlElement) {
+    el.stopHandler && el.stopHandler()
+    el.stopHandler = null
+  }
 }

src/store/state.ts

@@ -15,7 +15,7 @@ export interface State {
 export const state = (): State => ({
   shopList: [],
   selectedModule: '',
-  language: 'tw',
+  language: 'zh',
   config: {},
   shop: {},
   currentFloor: {},