营销型网站策划建设,企业网站搜索推广,263企业邮箱自动回复,网上如何推广产品正常来说#xff0c;一个vue项目前端需要用到的一些翻译字典对象保存方式一般有多重#xff0c;
新建js文件方式保存通过vuex方式保存通过sessionStorage保存通过localStorage保存
正常以上几点的保存方式是够用了。 但是#xff0c;当有字典不能以文件方式保存并且字典量…正常来说一个vue项目前端需要用到的一些翻译字典对象保存方式一般有多重
新建js文件方式保存通过vuex方式保存通过sessionStorage保存通过localStorage保存
正常以上几点的保存方式是够用了。 但是当有字典不能以文件方式保存并且字典量很多很大时候要考虑的事情就多了。 首选最新考虑存储的地方是vuex跟session安全性会相对高一些其次就需要考虑如果量大的问题。当字典数据量超过5MB的话那session就有些难受了。而vuex持久存储也是需要先存Storage中再取回到内存中用。那么怎么比较好解决这个量大且不能以文件存储方式呢。
思路 字典都是从后端调接口获取
还是通过session方式储存额外有的看需求要不要再存储到vuex中给session增加存储过期时间给session增加存储量是否接近5MB存储上限判断字典通过后端调接口获取 4.1 获取地方 1.通过路由跳转时beforeRouteEnter回调中调用跟判断 4.2 获取地方 2.通过页面created 回调中调用跟判断(有的是弹框子组件或者form表单并没有进行路由跳转)由于基本每个菜单页面都要使用到字典所以考虑通过混入mixin方式#由于字典一般用于选项跟翻译所以需要考虑是否使用 async/await方式来同步代码确保字典数据先取到再进入页面。是否使用各有利弊。
混入代码
window.g.SESSION_TIMEOUT 是定义全局变量可配置DICE_KEYS 是存储字典key的数组SESSION_TIMEOUT 为字典过期时间
export default function (dictKeys []) {let _isBeforeRouteEnterDictQuery falsereturn {data() {return {m_dictsFin: false,m_dicts: {}}},provide: function () {return {m_dicts: this.m_dicts}},methods: {getSessionStorageSize(){let obj let size 0if(!window.sessionStorage){try {throw Error(浏览器不支持sessionStorage)} catch (error) {console.log(error)}}else {obj window.sessionStorage}if(obj ! ){for(item in obj){if(obj.hasOwnProperty(item)){size obj.getItem(item).length}}}let val (size/1024).toFixed(2) //单位KB 5MB 1024*5 5120kB// 1024 * 4.5 4608if(val 4608){ //如果存储大小超过4.5MB则需清空KEY重新获取过return true}else {return false}},//如果上面一个获取方法不可用可以考虑使用这个方法替换estimateSessionStorageSize() {let totalSize 0;// 遍历 sessionStorage 中的每个项for (let i 0; i sessionStorage.length; i) {const key sessionStorage.key(i)const value sessionStorage.getItem(key)// 估算每个项的大小这里简单估算每个字符占2个字节// 注意这只是一个非常粗略的估算const size (new Blob([key value])).size// 累加大小totalSize size}let val (totalSize/1024).toFixed(2) //单位KB 5MB 1024*5 5120kB// 1024 * 4.5 4608if(val 4608){ //如果存储大小超过4.5MB则需清空KEY重新获取过return true}else {return false}},setPageConfig(res,vm){const list res?.data?.data || []store.dispatch(dynamicDicts, list)const pathAllDict {}if (list list.length 0) {const sessionName []list.forEach(e {if (e) {if(vm){vm.$set(vm.m_dicts, e.dictCode, e.dictDatas)}else {this.$set(this.m_dicts, e.dictCode, e.dictDatas)}sessionName.push(e.dictCode)pathAllDict[e.dictCode] e.dictDatassessionStorage.setItem(e.dictCode, JSON.stringify(e.dictDatas))}})store.commit(SET_DICT_DATA, pathAllDict)let currentSessionKey sessionStorage.getItem(DICE_KEYS) ? sessionStorage.getItem(DICE_KEYS).split(,) : []console.log(setPageConfig,currentSessionKey,sessionName)console.log(DICE_KEYS,[...new Set([...currentSessionKey,...sessionName])])sessionStorage.setItem(DICE_KEYS, [...new Set([...currentSessionKey,...sessionName])])if(vm){vm.$nextTick(() {vm.m_dictsFin true})}else {this.m_dictsFin true}}}},beforeRouteEnter(to, from, next) {_isBeforeRouteEnterDictQuery truenext(async vm {const date new Date().getTime()let DICE_KEYS sessionStorage.getItem(DICE_KEYS) || []if(!DICE_KEYS || DICE_KEYS.length 0){ //没存字典或者已全删除//重新设置过期时间let timing date 1000 * 60 * window.g.SESSION_TIMEOUTsessionStorage.setItem(SESSION_TIMEOUT, timing)//调用接口if(dictKeys dictKeys.length 0){await queryBatchCode(dictKeys, { isNoLoading: true }).then(res {vm.setPageConfig(res,vm)}).catch(e {console.log(catch)next()})}}else {//获取过期时间let timeout sessionStorage.getItem(SESSION_TIMEOUT)const preSessionS DICE_KEYS.length0 ? DICE_KEYS.split(,) : [] //转为数组if(vm.getSessionStorageSize()){preSessionS.forEach(item {sessionStorage.removeItem(item)//清除所有字典})sessionStorage.setItem(DICE_KEYS,[])//重新设置过期时间let timing date 1000 * 60 * window.g.SESSION_TIMEOUTsessionStorage.setItem(SESSION_TIMEOUT, timing)//调用接口if(dictKeys dictKeys.length 0){await queryBatchCode(dictKeys, { isNoLoading: true }).then(res {vm.setPageConfig(res,vm)}).catch(e {console.log(catch)next()})}}else {if(timeout){if(timeout - date 0){ //已过期preSessionS.forEach(item {sessionStorage.removeItem(item)//清除所有字典})sessionStorage.setItem(DICE_KEYS,[])//重新设置过期时间let timing date 1000 * 60 * window.g.SESSION_TIMEOUTsessionStorage.setItem(SESSION_TIMEOUT, timing)if(dictKeys dictKeys.length 0){await queryBatchCode(dictKeys, { isNoLoading: true }).then(res {vm.setPageConfig(res,vm)}).catch(e {console.log(catch)next()})}} else {//将已存在于session重的key挂载到m_dicts对象重let sessionKeyList dictKeys.filter(item preSessionS.includes(item))sessionKeyList.forEach(e {if (e) {vm.$set(vm.m_dicts, e, JSON.parse(sessionStorage.getItem(e)))}})//当前dictKeys匹配session中不存在的key去请求let reqKeyList dictKeys.filter(item !preSessionS.includes(item))if(reqKeyList.length 0){await queryBatchCode(reqKeyList, { isNoLoading: true }).then(res {vm.setPageConfig(res,vm)}).catch(e {console.log(catch)next()})}}}else {//重新设置过期时间let timing date 1000 * 60 * window.g.SESSION_TIMEOUTsessionStorage.setItem(SESSION_TIMEOUT, timing)//调用接口if(dictKeys dictKeys.length 0){await queryBatchCode(dictKeys, { isNoLoading: true }).then(res {vm.setPageConfig(res,vm)}).catch(e {console.log(catch)next()})}}}}})},// 有些非路由跳转触发的组件, 在 created 中调用async created() {if (_isBeforeRouteEnterDictQuery) returnif (!this.m_dictsFin) {const date new Date().getTime()let DICE_KEYS sessionStorage.getItem(DICE_KEYS) || []if(!DICE_KEYS || DICE_KEYS.length 0){ //没存字典或者已全删除//重新设置过期时间let timing date 1000 * 60 * window.g.SESSION_TIMEOUTsessionStorage.setItem(SESSION_TIMEOUT, timing)//调用接口if(dictKeys dictKeys.length 0){await queryBatchCode(dictKeys, { isNoLoading: true }).then(res {this.setPageConfig(res)})}}else {//获取过期时间let timeout sessionStorage.getItem(SESSION_TIMEOUT)const preSessionS DICE_KEYS.length0 ? DICE_KEYS.split(,) : [] //转为数组if(this.getSessionStorageSize()){preSessionS.forEach(item {sessionStorage.removeItem(item)//清除所有字典})sessionStorage.setItem(DICE_KEYS,[])//重新设置过期时间let timing date 1000 * 60 * window.g.SESSION_TIMEOUTsessionStorage.setItem(SESSION_TIMEOUT, timing)//调用接口if(dictKeys dictKeys.length 0){await queryBatchCode(dictKeys, { isNoLoading: true }).then(res {this.setPageConfig(res)})}}else {if(timeout){if(timeout - date 0){ //已过期preSessionS.forEach(item {sessionStorage.removeItem(item)//清除所有字典})sessionStorage.setItem(DICE_KEYS,[])//重新设置过期时间let timing date 1000 * 60 * window.g.SESSION_TIMEOUTsessionStorage.setItem(SESSION_TIMEOUT, timing)if(dictKeys dictKeys.length 0){await queryBatchCode(dictKeys, { isNoLoading: true }).then(res {this.setPageConfig(res)})}} else {//将已存在于session重的key挂载到m_dicts对象重let sessionKeyList dictKeys.filter(item preSessionS.includes(item))sessionKeyList.forEach(e {if (e) {this.$set(this.m_dicts, e, JSON.parse(sessionStorage.getItem(e)))}})//当前dictKeys匹配session中不存在的key去请求let reqKeyList dictKeys.filter(item !preSessionS.includes(item))if(reqKeyList.length 0){await queryBatchCode(reqKeyList, { isNoLoading: true }).then(res {this.setPageConfig(res)})}}}else {let timing date 1000 * 60 * window.g.SESSION_TIMEOUTsessionStorage.setItem(SESSION_TIMEOUT, timing)//调用接口if(dictKeys dictKeys.length 0){await queryBatchCode(dictKeys, { isNoLoading: true }).then(res {this.setPageConfig(res)})}}}}}}}
}在具体页面中使用
import pageDictMixin from /mixin/page-dict-mixinmixins: [pageDictMixin([DICT_YES_NO])],html部分代码
el-optionv-foritem in m_dicts.DICT_YES_NO :keyitem.dataValue:labelitem.dataLabel :valueitem.dataValue /
