'VueX Persistedstate File

I have a problem with my Vuex & persisted plugin.

"vue": "^2.6.11",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.1.0"

The problem is, that i try to store an "File" Object from an file input Vuetify. When i load my pdf and if i console it, he look like that and everything is good :

enter image description here

If i call my store with "this.$store.getters.getDocumentFile", i have the same answer and it's perfect.

BUT !

When i refresh my page, the persistedstate plugin save all of my data, but my file is broken :

enter image description here

The persistent plugin work well with all other states, like text or array, but not with a File Object .. I tried to change "fileDocument: null" to "fileDocument: Object" or other type, but nothing work, same result.

(I use an index.js to import all my futures modules)

index.js

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from 'vuex-persistedstate';

import documents from "./documents.module";

Vue.use(Vuex);
export const strict = false
export default new Vuex.Store({
    strict: true,
    plugins: [createPersistedState()],
    modules: {
        documents
    }
});

documents.module.js

const state = { 
  fileDocument: null
}

const getters = {
  getDocumentFile: state => {
    return state.fileDocument;
  }
};

const mutations = {
  SET_FILE_DOCUMENT: (state, file) => {
    state.fileDocument = file
  },
  RESET_FILE_DOCUMENT: (state) => {
    state.fileDocument = null
  }
};

const actions = {
  setDocumentFile: ({ commit }, { file }) => {
    commit('SET_FILE_DOCUMENT', file);
  },
  resetFileDocument: ({ commit }) => {
    commit('RESET_FILE_DOCUMENT');
  }
}

export default {
  state,
  getters,
  mutations,
  actions
};

Someone can help me ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source