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;

 

以上處理方式可能不夠優雅,歡迎大神指導。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM