项目中有很多地方上传视频和图片,需要限制上传对应资源的大小。大小从接口获取,为了方便使用写在store了中,但是一刷新就变成了0!
下载插件:cnpm install vuex-persistedstate --save
在store中的index.js文件配置,代码如下:
import { createStore } from 'vuex'
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import fileSize from './modules/fileSize'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'
import createPersistedState from "vuex-persistedstate";
const store = createStore({
modules: {
app,
user,
tagsView,
permission,
settings,
fileSize
},
getters,
plugins: [createPersistedState({//带参数的写法
storage: window.sessionStorage,//要存的地方,如果不配置,默认是localStorage
paths: ['fileSize']//要存的数据模块,如果不配置,就是所有模块的数据都保存
})]
});
export default store
对应的fileSize.js:
import { getResources } from '@/api/platformSetting/fileConfiguration'
const fileSize = {
state: {
videoFileSize: 0,
imgFileSize: 0,
},
mutations: {
SET_VideoSize: (state, value) => {
state.videoFileSize = value
console.log( state.videoFileSize,' state.videoFileSize');
},
SET_ImgSize: (state, value) => {
state.imgFileSize = value
}
},
actions: {
//获取视频,图片大小
GetFileSize({ commit, state }){
getResources().then((res) => {
commit('SET_VideoSize', res.data.videoMaxSize)
commit('SET_ImgSize', res.data.imgMaxSize)
}).catch(error => {
console.log(error,'error');
})
}
}
}
export default fileSize