Vue国际化四 -- 本地缓存

本地缓存和国际化后计算label宽度 【在vuex中编写】

/**
 * @Description: 国际化
 * @Author: 云霄紫潭
 * @Date: 2020年12月29日10:42:36
 * @LastEditTime: 2020年12月29日10:42:36
 * @LastEditors: 云霄紫潭
 */
import { setLang, getLang } from "@/utils/auth"
import context from "@/main"
const state = {
  lang: getLang() || 'cn',
  labelWidth: ''
}
const mutations = {
  SET_NEW_LANGUAGE: (state, command) => {
    switch (command) {
      case 'ZH':
        context.$i18n.locale = 'cn'
        state.lang = 'cn'
        setLang(state.lang)
        break;
      case 'EN':
        context.$i18n.locale = 'en'
        state.lang = 'en'
        setLang(state.lang)
        break;
      case 'JP':
        context.$i18n.locale = 'ja'
        state.lang = 'ja'
        setLang(state.lang)
        break;
    }
  },
  /**
     * @method 计算form表单labelWidth国际化后宽度
     * @param  {cnLang}  中文的内容宽度
     * @param  {otherLang}  日语与英语的内容宽度
     * @return {String}  labelWidth 宽度
*/
  GET_LABEL_WIDTH: (state, val) => {
    if (val === undefined) {
      val = {}
    }
    console.log('val===>', val);
    console.log('state.lang===>', state.lang);
    if (state.lang === 'ja' || state.lang === 'en') {
      state.labelWidth = val.otherLang || '190px'
    } else if (state.lang === 'cn') {
      state.labelWidth = val.cnLang || '120px'
    }
    console.log('state.labelWidth==>', state.labelWidth);
  }
}
const actions = {
  getLang({ commit }, view) {
    commit('SET_NEW_LANGUAGE', view)
    commit('GET_LABEL_WIDTH', view)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

本地缓存选择的语言

//国际化 
const lang = "HLT_INTERNATION_LANGUAGE"
export function getLang() {
  return sessionStorage.getItem(lang)
}
export function setLang(cache) {
  return sessionStorage.setItem(lang, cache)
}
export function removeLang(cache) {
  return sessionStorage.removeItem(lang)
}

获取lableWidth

  computed: {
    ...mapGetters(['labelWidth'])
  },

使用

弹框时使用【在弹框打开的时候】：
this.$store.commit('transfer/GET_LABEL_WIDTH', { cnLang: '130px', })

如果页面，直接计算labelWidth即可。