vue3+vue-i18n 监听语言的切换

最近在用 vue3 做一个后台管理系统,之前是只考虑中文,现在加了个需求是多语言。
本来也不是太难的需求,但是我用的并不熟悉,并且除了页面展示不同的语言,需求是在切换语言的时候在几个页面中需要做出一些自定义的行为,所以需要监听语言的变化,所以记录一下。
如上所述,如果只是在页面中展示不同语言的文字,还是很简单的,只需要安装、配置 vue-i18n 之后,在页面中用 $t(‘变量名’)就行了(这里指的是 html 中,如果是 ts/js 中需要用 $t 还要配置一下,如果有需要可以参考这里:vue3中使用vue-i18n
但之前没有关注监听语言变化并做出反应,功能做通了之后发现其实其实挺简单的。

安装、配置 vue-i18n 可以参考 上篇文章 [vue3中使用vue-i18n ](https://blog.csdn.net/JaneLittle/article/details/127112273),假如在某个组件中要监听语言的变化:
1. 在 hooks 文件夹中建一个 locale.ts 文件,文件内容:
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';export default function useLocale() {const i18 = useI18n();const currentLocale = computed(() => {return i18.locale.value;});const changeLocale = (value: string) => {i18.locale.value = value;localStorage.setItem('arco-locale', value);Message.success(i18.t('navbar.action.locale'));};return {currentLocale,changeLocale,};
}
  1. 在要监听语言变化的页面
import { watch } from 'vue';
import useLocale from '@/hooks/locale';  // 引入const { currentLocale } = useLocale();
watch(currentLocale, (newValue, oldValue) => {console.log('组件名----语言变化');console.log(`newValue: ${newValue}`);console.log(`oldValue: ${oldValue}`);});

这么看确实是挺简单的,并且在 ts 中如果不用 $t 用 i18.t 也挺方便的。

如果在不同的页面监听语言的变化并且做出统一的行为(比如提示“已经切换到某语言”),可以调用 changeLocale 方法:

import useLocale from '@/hooks/locale';const { changeLocale } = useLocale();// html<el-select  @change="changeLocale">...   // 代码</el-select>

希望对您有所帮助,也希望路过的大佬不吝赐教!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/27030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Openharmony重要特性之一浅析分布式软总线

OH分布式软总线 概述 简介分布式软总线的特征官方说明目录结构与代码说明分布式软总线使用 使用说明接口说明发现 发现的接口C++示例说明组网 组网的接口C++示例说明传输 软总线传输关键流程传输的接口注意事项一、概述 1.1 简介 ​ 分布式软总线能做什么? ​ 1.1 通过共享一…

50.两数之和(力扣)

目录 问题描述 核心代码解决 代码思想 时间复杂度和空间复杂度 问题描述 给定一个整数数组 和一个整数目标值 &#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。numstarget 你可以假设每种输入只会对应一个答案。但是&am…

jmeter工具测试和压测websocket协议【杭州多测师_王sir】

一、安装JDK配置好环境变量&#xff0c;安装好jmeter 二、下载WebSocketSampler发送请求用的&#xff0c;地址&#xff1a;https://bitbucket.org/pjtr/jmeter-websocket-samplers/downloads/?spma2c4g.11186623.2.15.363f211bH03KeI 下载解压后的jar包放到D:\JMeter\apache-j…

2.Flink应用

2.1 数据流 DataStream&#xff1a;DataStream是Flink数据流的核心抽象&#xff0c;其上定义了对数据流的一系列操作DataStreamSource&#xff1a;DataStreamSource 是 DataStream 的 起 点 &#xff0c; DataStreamSource 在StreamExecutionEnvironment 中 创 建 &#xff0c;…

计算机网络各层的功能以及常用协议

目录 1. 物理层&#xff08;Physical Layer&#xff09;2. 数据链路层&#xff08;Data Link Layer&#xff09;3. 网络层&#xff08;Network Layer&#xff09;4. 传输层&#xff08;Transport Layer&#xff09;5. 应用层&#xff08;Application Layer&#xff09; 计算机网…

init_pg_dir 的大小及作用

init_pg_dir 的大小 vmlinux.lds.S 中 在vmlinux.lds.S 中&#xff0c;有 init_pg_dir .; . INIT_DIR_SIZE; init_pg_end .;/*include/asm/kernel-pgtable.h*/ #define EARLY_ENTRIES(vstart, vend, shift) \ ((((vend) - 1) >&g…

基于 CentOS 7 构建 LVS-DR 群集

文章目录 前言1、LVS集群2、DR模式的工作流程图 一、LVS DR模式的配置二、配置步骤总结 前言 什么是LVS集群&#xff1f;DR模式&#xff1f; 1、LVS集群 LVS采用的是合入内核模块&#xff0c;先把对于nginx来说要稳定很多&#xff0c;性能和稳定都在一定层度上占据优势&…

【ChatGPT 指令大全】怎么使用ChatGPT写履历和通过面试

目录 怎么使用ChatGPT写履历 寻求履历的反馈 为履历加上量化数据 把经历修精简 为不同公司客制化撰写履历 怎么使用ChatGPT通过面试 汇整面试题目 给予回馈 提供追问的问题 用 STAR 原则回答面试问题 感谢面试官的 email 总结 在职场竞争激烈的今天&#xff0c;写一…

mysql从每个分组中取特定条件行的全部内容

取每个task_id分组中更新日期最新的一行 采用join的方式完成 select a.task_id,a.theme_id,a.time_unix from table_xxx a join (select task_id,max(time_unix) as max_timefrom table_xxxwhere date < ${date}and date > ${date} - 3and theme_i…

linux网络编程--线程池UDP

目录 学习目标 1线程池 2.UDP通信 3本地socket通信 学习目标 了解线程池模型的设计思想能看懂线程池实现源码掌握tcp和udp的优缺点和使用场景说出udp服务器通信流程说出udp客户端通信流程独立实现udp服务器代码独立实现udp客户端代码熟练掌握本地套接字进行本地进程通信 1…

FreeRTOS源码分析-10 互斥信号量

目录 1 事件标志组概念及其应用 1.1 事件标志组定义 1.2 FreeRTOS事件标志组介绍 1.3 FreeRTOS事件标志组工作原理 2 事件标志组应用 2.1 功能需求 2.2 API 2.3 功能实现 3 事件标志组原理 3.1 事件标志组控制块 3.2 事件标志组获取标志位 3.3 等待事件标志触发 3.4…

ESD接地实时监控系统有哪些功能

ESD接地实时监控系统是一种用于监测和维护静电放电&#xff08;ESD&#xff09;接地的设备和软件系统。静电放电事件可能会对敏感电子元件、设备或工作环境造成损害&#xff0c;因此对ESD接地进行有效的监控至关重要。 ESD接地实时监控系统主要包括以下几个方面的功能&#xf…

小程序的api使用 以及一些weui组件实列获取头像 扫码等

今日目标 响应式单位rpx小程序的生命周期 【重点】20%小程序框架 weui 【重点】 50%内置API 【重点】30%综合练习 1. 响应式rpx 1.1 rpx单位 rpx是微信小程序提出的一个尺寸单位&#xff0c;将整个手机屏幕宽度分为750份&#xff0c;1rpx 就是 1/750&#xff0c;避免不同手…

PCL 可视化球图形

文章目录 一、简介二、实现代码三、实现效果修改之处一、简介 过程很简单,使用pcl::visualization::PCLVisualizer中的addSphere函数就可以了,不过PCL中默认的球的分辨率过小,不够精细,需要我们手动修改一下源码。 二、实现代码 //标准文件 #include <iostream> #in…

QT自带PDF库的使用

QT自带PDF库可以方便的打开PDF文件&#xff0c;并将文件解析为QImage&#xff0c;相比网上提供的开源库&#xff0c;QT自带PDF库使用更方便&#xff0c;也更加可靠&#xff0c;然而&#xff0c;QT自带PDF库的使用却不同于其他通用库的使用&#xff0c;具备一定的技巧。 1. 安装…

以太网DHCP协议(十)

目录 一、工作原理 二、DHCP报文 2.1 DHCP报文类型 2.2 DHCP报文格式 当网络内部的主机设备数量过多是&#xff0c;IP地址的手动设置是一件非常繁琐的事情。为了实现自动设置IP地址、统一管理IP地址分配&#xff0c;TCPIP协议栈中引入了DHCP协议。 一、工作原理 使用DHCP之…

Go语言基础: Switch语句、Arrays数组、Slices切片 详细教程案例

文章目录 一. Switch语句1. Default case2. Multiple expressions in case3. Expressionless switch4. Fallthrough5. break6. break for loop 二. Arrays数组1. when arrays are passed to functions as parameters2. Iterating arrays using range3.Multidimensional arrays …

通向架构师的道路之weblogic与apache的整合与调优

一、BEAWeblogic的历史 BEA WebLogic是用于开发、集成、部署和管理大型分布式Web应用、 网络应用和数据库应 用的Java应用服务器。将Java的动态功能和Java Enterprise标准的安全性引入大型网络应用的 开发、集成、部署和管理之中。 BEA WebLogic Server拥有处理关键Web应…

title和h1、b与strong、i和em的区别

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别&#xff1f; title 与 h1&#xff1a;h1 标签写在网页的 body 中&#xff0c;title 标签写在网页的 head 中&#xff0c;h1 标签控制一段文字的大小&#xff08;从 h1~h6&#xff09;&#xff0c;title 是网页标题的意…

pytorch求导

pytorch求导的初步认识 requires_grad tensor(data, dtypeNone, deviceNone, requires_gradFalse)requires_grad是torch.tensor类的一个属性。如果设置为True&#xff0c;它会告诉PyTorch跟踪对该张量的操作&#xff0c;允许在反向传播期间计算梯度。 x.requires_grad 判…