正常来说,一个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 = false
return {
data() {
return {
m_dictsFin: false,
m_dicts: {
}
}
},
provide: function () {
return {
m_dicts: this.m_dicts
}
},
methods: {
getSessionStorageSize(){
let obj = ''
let size = 0
if(!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 = 4608
if(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.dictDatas
sessionStorage.setItem(e.dictCode, JSON.stringify(e.dictDatas))
}
})
store.commit('SET_DICT_DATA', pathAllDict