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
};
  1. 状态管理器: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>

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值