vuex：存放在store中变量，F5刷新会失效

项目中有很多地方上传视频和图片，需要限制上传对应资源的大小。大小从接口获取，为了方便使用写在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