diff --git a/src/directives/language.ts b/src/directives/language.ts index 7bc9714..4f71ffa 100644 --- a/src/directives/language.ts +++ b/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 + } } diff --git a/src/store/state.ts b/src/store/state.ts index d030a4f..e289c04 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -15,7 +15,7 @@ export interface State { export const state = (): State => ({ shopList: [], selectedModule: '', - language: 'tw', + language: 'zh', config: {}, shop: {}, currentFloor: {},