vue-cli之路由独立成JS文件之后,如何在路由中获取vuex属性或者设置国际化i18n的当前使用语言

Posted 随记

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的当前使用语言的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli3打包之后的文件为何不能本地打开

Vue-Router路由Vue-CLI脚手架和模块化开发 之 路由的动态跳转

vue-cli嵌套路由

Vue-Cli使用路由

vue中路由按需加载的几种方式

Vue-cli4 对路由配置的一些理解