Vue3响应式助你轻松实现国际化

举报
街角小林 发表于 2022/10/24 21:27:52 2022/10/24
【摘要】 持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第10天,点击查看活动详情本文为Varlet组件库源码主题阅读系列第十篇,也是最后一篇,读完本篇,可以了解到如何通过创建一个Vue3响应式对象就可以轻松实现国际化的需求。Varlet组件库支持多语言切换,使用也很简单:本文会从源码角度来看一下它是如何实现的,希望给你提供一点思路。如上图所示,主要就是提供了三个方法,不过在了...

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第10天,点击查看活动详情

本文为Varlet组件库源码主题阅读系列第十篇,也是最后一篇,读完本篇,可以了解到如何通过创建一个Vue3响应式对象就可以轻松实现国际化的需求。

Varlet组件库支持多语言切换,使用也很简单:

本文会从源码角度来看一下它是如何实现的,希望给你提供一点思路。

如上图所示,主要就是提供了三个方法,不过在了解具体实现前先看一下组件中是如何使用多语言的。

组件中是如何使用多语言的

比如Pagination组件:

其中的就需要支持多语言,源码中是这样的:

<template>
	<span>{{ size }}{{ pack.paginationItem }} / {{ pack.paginationPage }}</span>
</template>
import { pack } from '../locale'

就是这么简单。

pack是什么

上一小节中的pack是什么呢?为什么使用它就能随着多语言切换进行切换?其实很简单,pack就是一个Vue3的响应式对象:

const pack: Ref<Partial<T>> = ref({})

它的值就是多语言数据,响应式对象改变了模板显然会自动更新,那么切换语言也只需要修改pack的值即可。

语言扩展

先来看看语言扩展的函数add,一个多语言文件如下:

其实就是一个对象。

add方法接收两个参数,一个多语言名称,另一个就是多语言对象:

// 保存所有多语言数据
const packs: Record<string, Partial<T>> = {}
// 扩展多语言
const add = (lang: string, pack: Partial<T> & { lang?: string }) => {
    pack.lang = lang
    packs[lang] = pack
}

非常简单,就是以多语言名称为key,多语言对象为value保存到packs对象上,至于pack.lang = lang这个是用来干什么的,笔者反正没看出来。

切换语言

扩展完语言后就可以使用use方法进行切换,接收一个参数,即要切换到的语言名称:

// 切换语言
const use = (lang: string) => {
    if (!packs[lang]) {
        console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
        return {}
    }

    pack.value = packs[lang]
}

同样非常简单,先判断一下要切换到的语言是否存在,存在的话就将该语言对象数据赋值给响应式变量pack,那么使用了该响应式变量的所有模板都会自动更新,达到多语言切换的效果。

语言合并

Varlet还提供了一个merge方法来合并某个语言数据,比如想覆盖多语言的某个字段的默认翻译那么就可以通过这个方法来实现:

Locale.merge('en-US', {
  dialogTitle: 'Hello'
})
// 语言合并
const merge = (lang: string, pack: Partial<T>) => {
    if (!packs[lang]) {
        console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
        return
    }

    packs[lang] = { ...packs[lang], ...pack }

    use(lang)
}

接收两个参数,要合并的多语言名称,以及要合并的对象,合并也就是覆盖修改保存在packs对象上的多语言对象,需要注意的是合并操作后还会自动切换到该语言。

总结

可以看到使用Vue3的响应式对象来实现国际化是非常简单的,各位如果有此需求的话不妨考虑以上实现。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。