🎈 perf(i18n): i18n处理i18n响应数据问题

src/config/db.ts

@@ -0,0 +1,6 @@
+import Database from '@tauri-apps/plugin-sql'
+
+export async function initDB() {
+  const db = await Database.load('sqlite:store.db')
+  console.log('db: ', db)
+}

src/hook/i18n.ts

@@ -0,0 +1,16 @@
+import { reactive, ref, toRefs, watchEffect } from 'vue'
+import { useI18n, UseI18nOptions } from 'vue-i18n'
+
+export function useStoreI18n(options?: UseI18nOptions) {
+  const { t, locale } = useI18n(options)
+  const keyMap = reactive<Record<string, string>>({})
+  function $t(key: string) {
+    watchEffect(() => {
+      if (locale.value) keyMap[key] = t(key)
+    })
+    return toRefs(keyMap)[key]
+  }
+  return {
+    $t,
+  }
+}

src/main.ts

@@ -7,9 +7,11 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { createPinia } from 'pinia'
 import i18n from './i18n'
 import './styles.css'
+import { initDB } from './config/db'
 
+initDB()
 const pinia = createPinia()
 const app = createApp(App).use(pinia).use(ElementPlus).use(i18n).use(router).mount('#app')
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  ;(app as any).component(key, component)
-}
+// for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+//   ;(app as any).component(key, component)
+// }

src/views/layout/components/Menu.vue

@@ -1,35 +1,44 @@
 <template>
-    <div class="flex flex-col items-center">
-        <div class="rounded-[20px] flex items-center justify-center  w-[75px] h-[75px]" :class="[props.info.slected?'active':'']">
-            <img :src="props.info?.img" class="w-[70px] h-[70px]" />
-        </div>
-        <div class="text-[16px] text-center text-[16px] w-[75px]" :class="[props.info.slected?'font-semibold':'']">
-            {{ t(props.info.name) }}
-        </div>
+  <div class="flex flex-col items-center">
+    <div
+      class="rounded-[20px] flex items-center justify-center w-[75px] h-[75px]"
+      :class="[props.info.slected ? 'active' : '']"
+    >
+      <img :src="props.info?.img" class="w-[70px] h-[70px]" />
     </div>
+    <div
+      class="text-[16px] text-center text-[16px] w-[75px]"
+      :class="[props.info.slected ? 'font-semibold' : '']"
+    >
+      {{ info.name }}
+    </div>
+  </div>
 </template>
 <script setup>
-    import { watch } from 'vue'
-    import router from '../../../router'
-    import { useI18n } from 'vue-i18n'
-    const { t, locale } = useI18n()
-    const props=defineProps({
-        info:{type:Object,required:true}
-    })
-    watch(()=>props,()=>{
-        if(props.info.slected){
-            router.push(props.info.path)
-        }
-    },{deep:true})
+import { watch } from 'vue'
+import router from '../../../router'
+import { useI18n } from 'vue-i18n'
+const { t, locale } = useI18n()
+const props = defineProps({
+  info: { type: Object, required: true },
+})
+watch(
+  () => props,
+  () => {
+    if (props.info.slected) {
+      router.push(props.info.path)
+    }
+  },
+  { deep: true },
+)
 const changeLanguage = (lang) => {
   locale.value = lang
 }
 </script>
 <style scoped>
-    .active{
-        border-radius: 19.296px;
-        background: #F67F20;
-        box-shadow: 0px 12.864px 38.593px 0px rgba(234, 124, 105, 0.32);
-    }
-
-</style>
+.active {
+  border-radius: 19.296px;
+  background: #f67f20;
+  box-shadow: 0px 12.864px 38.593px 0px rgba(234, 124, 105, 0.32);
+}
+</style>

src/views/layout/index.vue

@@ -1,15 +1,15 @@
 <template>
-    <div class="main flex flex-col">
-        <Header></Header>
-        <div class="flex-1 flex shrink-0" style="height:calc(100vh - 100px)">
-            <div class="h-full w-[168px] border-r-[1px] border-r-[#e6e6e6] flex flex-col justify-around">
-                <Menu @click="handleClick(item)" v-for="item in menus" :info="item" />
-            </div>
-            <div class="h-full flex-1 overflow-y-auto">
-                <router-view />
-            </div>
-        </div>
+  <div class="main flex flex-col">
+    <Header></Header>
+    <div class="flex-1 flex shrink-0" style="height: calc(100vh - 100px)">
+      <div class="h-full w-[168px] border-r-[1px] border-r-[#e6e6e6] flex flex-col justify-around">
+        <Menu @click="handleClick(item)" v-for="item in menus" :info="item" />
+      </div>
+      <div class="h-full flex-1 overflow-y-auto">
+        <router-view />
+      </div>
     </div>
+  </div>
 </template>
 <script setup>
 import { ref } from 'vue'
@@ -21,53 +21,54 @@ import Header from './components/Header.vue'
 import menuCooker1 from '/imgs/menu-cooker1.png'
 import menuCooker2 from '/imgs/menu-cooker2.png'
 import menuCooker3 from '/imgs/menu-cooker3.png'
+import { useStoreI18n } from '@/hook/i18n'
 const { t, locale } = useI18n()
-
-const menus=ref([
-    {
-        name: 'sidebar.menu',
-        img:menuCooker1,
-        key:1,
-        path:'/menu',
-        slected:true
-    },
-    {
-        name: 'sidebar.order',
-        img:menuCooker2,
-        key:2,
-        path:'/order'
-    },
-    {
-        name: 'sidebar.exit',
-        img:menuCooker3,
-        key:3,
-        path:'/exit'
-    },
+const { $t } = useStoreI18n()
+const menus = ref([
+  {
+    name: $t('sidebar.menu'),
+    img: menuCooker1,
+    key: 1,
+    path: '/menu',
+    slected: true,
+  },
+  {
+    name: $t('sidebar.order'),
+    img: menuCooker2,
+    key: 2,
+    path: '/order',
+  },
+  {
+    name: $t('sidebar.exit'),
+    img: menuCooker3,
+    key: 3,
+    path: '/exit',
+  },
 ])
-function handleClick(m){
-   const newMenus =  menus.value.map(i=>{
-        i.key==m.key?i.slected=true:i.slected=false
-        return i
-    })
-    menus.value = newMenus
+function handleClick(m) {
+  const newMenus = menus.value.map((i) => {
+    i.key == m.key ? (i.slected = true) : (i.slected = false)
+    return i
+  })
+  menus.value = newMenus
 }
 </script>
 <style scoped lang="scss">
 .main {
-    width: 100%;
-    height:100vh;
-    min-width: 1000px;
-    overflow-y: hidden;
-    .main-header {
-        // display: flex;
-        // justify-content: space-between;
-        // align-items: center;
-        height: 102px;
-        padding: 0 48px;
+  width: 100%;
+  height: 100vh;
+  min-width: 1000px;
+  overflow-y: hidden;
+  .main-header {
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+    height: 102px;
+    padding: 0 48px;
 
-        .logo {
-            width: 156px;
-        }
+    .logo {
+      width: 156px;
     }
+  }
 }
-</style>
+</style>