vue3.0安装使用vue-i18n实时切换语言 不用刷新

我的版本
“vue”: “^3.0.0”,
“vue-i18n”: “^9.0.0”

• 安装 npm install vue-i18n@next 这样装的最新版的才能在vue3.0使用
• 使用
  1. main.js

import { createApp } from “vue”;
import App from “./App.vue”;
import i18n from “./lang”;
const app = createApp(App);
app.use(i18n);
app.mount("#app");
2. ./lang文件夹
src下新建lang文件夹，里面新建三个文件zh/en自由配置，下面我只是给举个例子配置按钮的中英文

en.js
export default {
button: {
edit: “Edit”,
update: “Update”,
add: “Add”,
del: “Delete”,
search: “Search”,
submit: “Submit”,
save: “Save”,
back: “Back”,
cancel: “Cancel”,
upload: “Upload”
}
}
zh.js
export default {
button: {
edit: “编辑”,
update: “更新”,
add: “添加”,
del: “删除”,
search: “查询”,
submit: “提交”,
save: “保存”,
back: “返回”,
cancel: “取消”,
upload: “上传”
}
}
index.js
import { createI18n } from “vue-i18n”; //引入vue-i18n组件
import zh from “./zh”;
import en from “./en”;
//注册i18n实例并引入语言文件
const i18n = createI18n({
locale: localStorage.getItem(“lang”) || “zh”, // 语言标识（缓存里面没有就用中文）
fallbackLocale: “zh”, //没有英文的时候默认中文语言
messages: {
en,
zh
}
});
export default i18n;
vue页面切换语言
写一个按钮 点击触发changeLanguage这个事件 就可以实时切换语言显示了

切换语言的关键代码
ctx.$i18n.locale = locale; //切换当前语言环境

JS中取值
vue2.0我们都知道很简单this.$t(“button.add”) 就能轻而易举取到，但是vue3.0没有this，因此我用的getCurrentInstance()
看官方说明https://www.vue3js.cn/docs/zh/api/composition-api.html#getcurrentinstance
直接在控制台打印出来这个getCurrentInstance(),发现里面有ctx和proxy两个属性功能几乎一样，暂且就先当vue2里面的this用了
ctx.$t(“button.add”) 或者 proxy.$t(“button.add”)

vue官方提供的这个getCurrentInstance()也没细读，在这里当this使用可能被有些大佬取笑了，还在学习，希望能帮到有需要的同学.

看到这里了点个赞吧！！！