locale 全局切换测试

app/wails/frontend/src/App.vue

@@ -1,10 +1,15 @@
 <template>
-    <router-view/>
+    <el-config-provider v-bind="globalConfig">
+        <router-view/>
+    </el-config-provider>
 </template>
 
 <script setup>
-import {onBeforeUnmount, onMounted} from "vue";
+import {computed, onBeforeUnmount, onMounted, reactive} from "vue";
 import {createDebugger, destroyDebugger} from "src/utils/debugger/eruda";
+import {useGlobalConfig} from "src/store/globalConfig";
+
+const globalConfig = computed(()=>useGlobalConfig().$state.ui)
 
 onMounted(()=>{
     createDebugger()

app/wails/frontend/src/main.js

@@ -4,9 +4,11 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import Router from "frontend/src/router/router";
+import {createPinia} from "pinia";
 
 const app = createApp(App)
 
+app.use(createPinia())
 app.use(Router)
 app.use(ElementPlus)
 app.mount('#app')

app/wails/frontend/src/store/globalConfig.js

@@ -0,0 +1,9 @@
+import {defineStore} from "pinia";
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+export const useGlobalConfig = defineStore("globalConfig",{
+    state:() => ({
+        ui: {
+            locale: zhCn
+        }
+    })
+})

app/wails/frontend/src/views/Home.vue

@@ -1,9 +1,11 @@
 <script setup>
 import {Greet} from 'frontend/wailsjs/go/main/App';
 import {reactive} from "vue";
-import {useWebNotification} from '@vueuse/core'
+import {toReactive, useWebNotification} from '@vueuse/core'
 import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
 import {hideDebugger, showDebugger} from "src/utils/debugger/eruda";
+import {useGlobalConfig} from "src/store/globalConfig";
+import {storeToRefs} from "pinia";
 
 const controller = reactive({
     input: ""
@@ -65,6 +67,24 @@ function getAllEnv(){
         console.log(allEnv)
     })
 }
+
+const globalConfig = useGlobalConfig()
+const globalConfigState = storeToRefs(globalConfig)
+
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+function switchLocale(){
+    console.log(globalConfigState.ui.value.locale)
+    if(globalConfigState.ui.value.locale.name === 'zh-cn'){
+        globalConfig.$patch(state=>{
+            state.ui.locale = en
+        })
+    } else {
+        globalConfig.$patch(state=>{
+            state.ui.locale = zhCn
+        })
+    }
+}
 </script>
 
 <template>
@@ -80,6 +100,10 @@ function getAllEnv(){
         <el-button @click="showDebugger()">显示 debugger</el-button>
         <el-button @click="hideDebugger()">隐藏 debugger</el-button>
     </div>
+
+    <el-button @click="switchLocale()">切换 locale</el-button>
+    <el-table mb-1 :data="[]" />
+    <el-pagination :total="100" />
 </template>
 
 <style scoped>