lang语言文件
- 创建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
};
- 状态管理器: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>