国际化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;
以上处理方式可能不够优雅,欢迎大神指导。