Smallest and fastest Vuex4, Vue3 and Nuxt - ready plugin that saves and rehydrates the state of your application between page reloads
npm install --save vuex-persister
or
yarn add vuex-persister
import VuexPersister from 'vuex-persister'
// JavaScript
const vuexPersister = new VuexPersister({
// ...your options
})
// Typescript
const vuexPersister = new VuexPersister<State>({
// ...your options
})
// JavaScript
const store = createStore({
state: {/* ... */},
// ...
plugins: [vuexPersister.persist] // integrate the plugin
})
// TypeScript
const store = createStore<State>({
state: {/* ... */},
// ...
plugins: [vuexPersister.persist] // integrate the plugin
})
// ~/plugins/vuex-persister.js
import VuexPersister from 'vuex-persister'
export default ({ store }) => {
new VuexPersister({
// ...your options
}).persist(store)
}
// ~nuxt.config.js
export default {
/* ... other options here */
plugins: [{ src: '~/plugins/vuex-persister.js', ssr: false }],
}
Creates an instance of the plugin while accepting specific options as below:
key <String>
: The key with which to store the state in the specified storage. Defaults tovuex
.overwrite <Boolean>
: Whether to overwrite the state with the saved state instead of merging the two objects withdeepmerge
. Defaults tofalse
.storage <Object>
: The storage to use. Should be eitherlocalStorage
orsessionStorage
. Defaults tolocalStorage
. Can also define own functions such as with the SecureLocalStorage Obfuscation belowgetState <Function>
: A function that is called to retrieve a previously persisted state. Defaults to usingstorage
'sgetItem
function.saveState <Function>
: A function that is called to persist the given state. Defaults to usingstorage
'ssetItem
function.
// JavaScript
new VuexPersister({
key: 'my_key',
overwrite: true,
storage: sessionStorage // localStorage is the default here
})
You can also use cookies if localStorage/sessionStorage is not ideal.
// install js-cookie and then import
import Cookies from 'js-cookie'
const vuexPersister = new VuexPersister({ // new VuexPersister<State>({ (for TypeScript)
storage: {
getItem: (key) => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { secure: true }),
removeItem: (key) => Cookies.remove(key),
length: Object.keys(Cookies.get()).length,
clear: () => Cookies.remove(),
key: (key: number) => null
}
})
You may want to obfuscate your stored localStorage
keys to prevent a person from easily retrieving the state. The secure-ls
package secures the
state with a high-level of encryption and data compression.
NOTE: Encrypting and compressing your state alone does not offer enough security to store sensitive data like passwords and other personal information.
You can use it in conjunction with other security measures.
// first install the secure-ls package
import SecureLS from 'secure-ls'
import VuexPersister from 'vuex-persister'
const SecureLocalStorage = new SecureLS({ encodingType: 'aes' }) // AES encryption and data compression
/* Can also accept other options as below:
* new SecureLS({encodingType: '', isCompression: false})
* new SecureLS({isCompression: false})
* SecureLS({encodingType: 'rc4', isCompression: false})
* new SecureLS({encodingType: 'rc4', isCompression: false, encryptionSecret: 's3cr3tPa$$w0rd@123'})
* More details are found here (https://www.npmjs.com/package/secure-ls) */
// JavaScript
const vuexPersister = new VuexPersister({ // new VuexPersister<State> with TypeScript
storage: {
getItem: (key) => SecureLocalStorage.get(key),
setItem: (key, value) => SecureLocalStorage.set(key, value),
removeItem: (key) => SecureLocalStorage.remove(key),
length: SecureLocalStorage.getAllKeys().length,
clear: () => SecureLocalStorage.clear(),
key: (key: number) => null
}
})
The MIT License (MIT). Please see License File for more information.