vue-cli之路由獨立成JS文件之後,如何在路由中獲取vuex屬性或者設置國際化i18n的當前使用語言
阿新 • • 發佈:2018-02-12
out 數據 blog tor 使用 common -- ges 如何
國際化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的當前使用語言