vue3 项目国际化（语言切换）（uniapp项目）

lang语言文件

1. 创建lang文件，在此文件创建cn.js（中文文本文件）、en.js（英文文本文件）、index.js（文件集合）

cn.js

export default {
	name: "中文",
	langList: [
		{ text: "中文", value: "cn" },
		{ text: "English", value: "en" }
	]
}

en.js

export default {
	name: "English",
	langList: [
		{ text: "中文", value: "cn" },
		{ text: "English", value: "en" }
	]
}

index.js

import en from "./en";
import cn from "./cn";
export default {
	cn,
	en
};

2. 状态管理器：store文件引入lang文件，通过参数获取对应数据

import { createStore } from "vuex";
import langText from "./lang";

function parseLang(l: string) {
 	return langText[l]; // 获取指定语言数据
}
const store = createStore({
   state() {
       	return {
   			language: "cn" // 默认值
   		}
	},
 	mutations: {
   		SETLANGUAGE(state: any, data: string) {
   			state.language = data;
   			uni.setStorageSync("language", data);
   		}
 	},
 	getters: {
   		lang: (state) => parseLang(state.language) // 语言数据
 	}
});

export default store;

main.ts文件（全局混入）

1. mixin/index.ts

import { mapGetters, mapState } from "vuex";

// 全局混入
const mixin = {
   computed: {
   	...mapGetters(['lang']),
   	...mapState({
   		language: (state: any) => state.language
   	})
   },
};
export default mixin;

2. main.ts

import { createSSRApp } from "vue";
import App from "./App.vue";
import store from "./store";
import mixin from "./mixin"; // 全局混入

export function createApp() {
 const app = createSSRApp(App);
   app.use(store);
   app.mixin(mixin);
 return {
   app,
 };
}

lang语言切换页面

lang.vue

<template>
	<view
		class="information-item uni-align-justify"
		v-for="(item, i) in lang.langList"
		:key="i"
		@click="changeLang(item.value)"
	>
		<text class="label">{{ item.text }}</text>
	</view>
	{{ lang.name }}
</template>
<script setup lang="ts">
	import { ref } from "vue";
	import store from "@/store";
	let language = ref(uni.getStorageSync("language")); // 本地缓存的语言数据
	function changeLang(val) {
		if (language.value !== val) {
			language.value = val;
			store.commit("SETLANGUAGE", val); // 切换语言
		}
	}
</script>