九月打卡】第3天 全新升级，基于Vue3最新标准，打造后台综合解决方案之国际化原理

课程名称：全新升级，基于Vue3最新标准，打造后台综合解决方案

课程章节：5-02 国际化实现原理

课程讲师: Sunday

课程内容：

例如有这样一个需求：

主页面有一个按钮，通过这个按钮的点击可以切换整个网站的展示语言。

这个需求背后的代码逻辑的解析就是通过一个变量的值的切换来进行展示。

这样的需求就是国际化的需求。那么我们通过代码来一步一步分步来实现下这个原理

1. 预先定义好数据源(定义msg值的数据源 )

const messages={
	en:{
	msg:'hello world'
	},
	zh:{
	msg:'你好世界'
	}
}

在message这个对象里面定义两个不同的都包含msg变量的对象。一个叫en,一个叫zh

2. 定义一个切换变量

let locale='en'

我们定义了一个叫locale的变量并且暂时给它赋值en来占位，后面会根据需要动态变化

3. 定义赋值函数

function t(key){
	return messages[locale][key]
}

从定义的这个函数看出其实它return出去的是三个变量的值的组合message是最开始预定义好的那个message的object的变量名locale是语言分类的变量名也就是我们上面定义的那个占位的 key是里面的msg属性。三重变量动态组合

4. 为msg赋值

let msg=t('msg')
console.log(msg);

这里相当于我们调用了函数t来赋值给msg因为我们return出去的是三个变量定位的值，那么msg就是在当前message下的local下的那个值 我们改变local的值就能够获取不同语言环境下的值。

课程总结：

其实这里的t是专门针对message这个预构的结构的方法，如果有多个对象，我们也可以写多个方法，或者写一个方法将这个message也动态去获取，那就是xxx[message][local][msg]这种结构去改造。原理差不多就是这样。那么我们从实现的步骤来总结一下这个国际化的底层步骤原理为：a.通过一个变量来控制语言环境。b所有语言环境下的数据源要预先定义好。c通过一个方法来获取当前语言下指定属性的值。d该值即为国际化下展示值。接下来的学习会一步步落实国际化的具体实现。在实现之前打好原理的基础就显得尤为重要了。

课程截图：

1. 预定义结构
   

2. 写方法给变量赋值
   

3. 在控制台调试结果。并尝试改变local的值来改变调用函数赋值变量的结果。