Uniapp语言切换动态修改Js文件

前言

续接上面两篇文章,第一篇文章是uniapp实现多语言切换,第二篇文章是i8n在js中的使用,由于我的菜单是在js文件中,所以我切换的时候除了菜单不实现效果,别的页面都可以实现,本篇文章主要是针对于怎么动态修改js文件,使之实现效果。

遇到的问题

下述代码是我做切换时的操作,可以看到i18n.locale = "zh_CN"是我从js中导入过来的,这里我也修改了语言,打印中也能看到,但是最主要的问题的是,js文件不是像vue文件那样动态刷新的,我在js文件中的多语言在第一次加载时就已经固定了,后续修改的话不会对js中的文件产生影响。
这里我想到刷新vue页面,但是没实现效果,我尝试使用//us = newus;来进行重赋值也没实现效果,百度搜了一下说是因为导出的us是只读属性,不可做修改。

if(this.dataFrom.titleId == 1){
								this._i18n.locale = "zh_CN"
                                i18n.locale = "zh_CN"
								console.log('1',i18n.locale)
                                
	                            let newus={
									data:[
										{
										  title:i18n.tc('work.kongtuoruku'),
										  icon:"/static/maike/PDAruku.png",
										  description:i18n.tc('work.kongtuoruku'),
										  useCount:1000,
										  page:'PdaEmptyTraryImport'
										},
										
										{
										  title:i18n.tc('work.kongtuochuku'),
										  icon:"/static/maike/PDAchuku.png",
										  description:i18n.tc('work.kongtuochuku'),
										  useCount:1000,
										  page:'PdaEmptyTraryExport'
										},
										{
										  title:i18n.tc('work.konglongruku'),
										  icon:"/static/maike/trayImport.png",
										  description:i18n.tc('work.konglongruku'),
										  useCount:1000,
										  page:'StandardEmptyImport'
										},
										{
										  title:i18n.tc('work.konglongchuku'),
										  icon:"/static/maike/trayExport.png",
										  description:i18n.tc('work.konglongchuku'),
										  useCount:1000,
										  page:'StandardEmptyExport'
										},
										
										{
										  title:i18n.tc('work.chengpinruku'),
										  icon:"/static/maike/PDAMaruku.png",
										  description:i18n.tc('work.chengpinruku'),
										  useCount:1000,
										  page:'PdaMaterialImport'
										},
										{
										  title:i18n.tc('work.zhijianhuikuzupan'),
										  icon:"/static/maike/PDArukuBCP.png",
										  description:i18n.tc('work.zhijianhuikuzupan'),
										  useCount:1000,
										  page:'PdaMaterialImportCopy'
										},
										{
										  title:i18n.tc('work.zupanxiangqing'),
										  icon:"/static/maike/detail.png",
										  description:i18n.tc('work.zupanxiangqing'),
										  useCount:1000,
										  page:'UnitloadDetail'
										},
										{
										  title:i18n.tc('work.chakankucun'),
										  icon:"/static/maike/checkStock.png",
										  description:i18n.tc('work.chakankucun'),
										  useCount:1000,
										  page:'QueryInventory'
										},
										{
										  title:i18n.tc('work.tuopanpizhong'),
										  icon:"/static/maike/uncoiling.png",
										  description:i18n.tc('work.tuopanpizhong'),
										  useCount:1000,
										  page:'PalletTareMaintenance'
										},
										{
										  title:i18n.tc('work.zhidinghuoweichuku'),
										  icon:"/static/maike/PDAzhuanyun.png",
										  description:i18n.tc('work.zhidinghuoweichuku'),
										  useCount:1000,
										  page:'SpecifyTheLocationOut'
										},
										{
										  title:i18n.tc('work.banchengpinruku'),
										  icon:"/static/maike/PDAMaruku.png",
										  description:i18n.tc('work.banchengpinruku'),
										  useCount:1000,
										  page:'PdaImportSX'
										},
										{
										  title:i18n.tc('work.sanjianruku'),
										  icon:"/static/maike/PDAMaruku.png",
										  description:i18n.tc('work.sanjianruku'),
										  useCount:1000,
										  page:'pdaPartsIn'
										}	
									]
								};
								console.log('11',newus)
								myJsLibrary.us = newus
								//us = newus;
							}

解决思路

然后我无意中看到一条导入语句,是全导出的import * as myJsLibrary from '@/common/util/work.js';,这里的话我是尝试使用了一下,然后通过用myJsLibrary 点出来这个属性用来重赋值,事实证明这个办法是可行的。

你可能感兴趣的:(前端,uniapp,javascript,uni-app,vue.js)