vue-cli之路由独立成JS文件之后,如何在路由中获取vuex属性或者设置国际化i18n的当前使用语言
国际化vue-i18n的使用:
import Vue from 'vue';
import VueI18n from 'vue-i18n';
// 引入语言包
import zh from '@/common/i18n/zh';
import en from '@/common/i18n/en'; // 多语
Vue.use(VueI18n); // 实例化语言包
const i18n = new VueI18n({
locale: 'english', // 语言标识,默认英文
// this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'english': en, // 英文语言包
'chinese': zh // 中文语言包
}
}); export default i18n;
vuex获取属性常用方式:
// 在组件和路由页面中使用
this.$store.state.xxxx
我的目录结构
router
--index.js // 暴露router对象,用于注入vue
--a.js // a模块路由,index.js引入
--b.js // b模块路由,index.js引入
--c.js // c模块路由,index.js引入
store
--index.js // 暴露vuex对象,用于注入vue
--stateX.js // 组件X的状态和方法
--stateY.js // 组件Y的状态和方法
i18n
--index.js // 暴露多语对象,用于注入vue
--en.js // 英文语言包
--zh.js // 中文语言包
我的需求是要在router里面a.js获取vuex中保存的数据,并且设置i18n的语言。
由于a.js里面并没有vue的this对象,调用方法和获取属性这就是个问题了,作为一个vue新手,百度一番之后还是没找到解决办法。
最终自己尝试一番之后 ,发现可直接引入vuex和i18n暴露的对象,直接在路由中使用,使用方法:
// router/a.js // 引入多语配置
import i18n from '@/i18n';
// 引入vuex
import store from '@/store'; // i18n设置语言
i18n.locale = 'chinese'; // vux使用方法:
// 调用方法
store.commit('xxx');
// 获取属性
const x = store.state.xxxx;
以上处理方式可能不够优雅,欢迎大神指导。
vue-cli之路由独立成JS文件之后,如何在路由中获取vuex属性或者设置国际化i18n的当前使用语言的更多相关文章
- matrix-gui-2.0 将javascript文件夹改成js文件夹
/******************************************************************************** * matrix-gui-2.0 将 ...
- 独立的js文件中不能使用EL表达式取值
在独立的js文件中写了一个EL表达式取值,发现没有取到值,原因在于不能在独立的js文件中使用EL表达式,可以在jsp页面定义全局变量,然后在js文件中引用
- 在JAVA中将class文件编译成jar文件包,运行提示没有主清单属性
在JAVA中将class文件编译成jar文件包,运行提示没有主清单属性 Maven 项目生成jar运行时提示“没有主清单属性” 新建了一个Maven的项目,mvn compile和mvn packag ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- 六、Vue-Router:基础路由处理、路由提取成单独文件、路由嵌套、路由传参数、路由高亮、html5的history使用
一.vue-router的安装 官网文档 [官网]:https://cn.vuejs.org/v2/guide/routing.html [router文档]:https://router.vuejs ...
- angular ,require.js, angular-async-loader实现单页面路由,控制器js文件分离
https://github.com/heboliufengjie/appRoute/tree/re re 分支,实现,路由配置,控制器js文件分离
- java代码将excel文件中的内容列表转换成JS文件输出
思路分析 我们想要把excel文件中的内容转为其他形式的文件输出,肯定需要分两步走: 1.把excel文件中的内容读出来: 2.将内容写到新的文件中. 举例 一张excel表中有一个表格: 我们需要将 ...
- vue 打包后app.css,verondor.js文件过大
参考:https://blog.csdn.net/feiyu_may/article/details/80987404 https://blog.csdn.net/qq_4199961 ...
随机推荐
- @SuppressWarnings注解用法
@SuppressWarnings注解主要用在取消一些编译器产生的警告对代码左侧行列的遮挡,有时候这会挡住我们断点调试时打的断点. 如图所示: 这时候我们在方法上加上@SuppressWarnings ...
- .Net Core WepApi-JWT认证
JWT 介绍 JWT(Json Web Token)是一种开放标准,已Json对象的方式在各方之间安全地传输信息 JWT登陆状态不在服务器端进行存储,而是通过秘钥生成一个具有有效时间的Token返回给 ...
- IPv4如何转换为IPv6?
ipv6已经逐渐在应用,现在已经有很多的运营商支持ipv6,前天我们也发布了如何让电脑使用ipv6地址?有很多朋友在问?ipv6有什么作用,它的表示方式是什么,今天我们来一起来详细了解下ipv6相关计 ...
- mysql优化 ON DUPLICATE KEY UPDATE
场景:比如,有一张表,专门记录业务里的唯一数据记录,这张表里如果存在此唯一数据的记录就更新此行数据的某个字段,如果此唯一数据不存在,那么就添加一条最新数据. 一贯操作:如果不知道mysql有 ON D ...
- nepenthes用法
安装 # apt-get install nepenthes 配置文件 # vi submit-file.conf submit-file { path "/var/lib/nepenthe ...
- idea之将Maven的jar包安装到本地仓库
1.问题概要 很多时候,我们需要应用第三方的jar包,但是这个jar包,在maven远程仓库里面没有, 比如我们要使用京东的sdk,但这个sdk在maven的远程仓库中没有,于是我们需要将这个jar包 ...
- python测试开发django-43.xadmin添加小组件报错解决
前言 xadmin首页上有个添加小组件按钮,打开的时候会报错“render() got an unexpected keyword argument 'renderer'”环境:python3.6dj ...
- 关于jupyter notebook密码设置
对于一个jupyter编辑器使用的新手,更换浏览器或者Logout后,需要输入密码进行登陆时 按照网上的教程怎么设置都不行,那么自己整理了一个适用于初学者的操作. 1.windows下,打开命令行,重 ...
- 自动化运维-ansible入门篇
1.ansible配置 什么是Ansible IT自动化工具 依赖于现有的操作系统凭证来访问控制远程机器 简单易用.安全可靠 Ansible可以完成哪些任务 配置系统 开发软件 编排高级的IT任务 A ...
- PCB板信号完整性分析的操作步骤及设置方法
AD16的主要功能是画电路原理图和根据电路原理图设计PCB板.为了使设计的电路.画完的电路原理图,从电路原理上不存在错误,从电路逻辑上不存在混乱,AD16专门开发了电路原理图的仿真程序.这样可以把设计 ...