@nuxtjs/universal-storage
v0.5.9
Published
Universal Storage Utilities for Nuxt
Downloads
5,969
Keywords
Readme
Nuxt Universal Storage Module
Universal Storage Utilities for Nuxt.js based on @nuxt-community/auth-module
Setup
- Add
@nuxtjs/universal-storage
dependency using yarn or npm to your project
yarn add @nuxtjs/universal-storage
OR
npm install @nuxtjs/universal-storage --save
- Add
@nuxtjs/universal-storage
to themodules
section of yournuxt.config.js
file
{
modules: [
'@nuxtjs/universal-storage',
],
storage: {
}
}
Usage
Options
Options are defined as following:
storage: {
vuex, // boolean or {namespace}
localStorage, // boolean or {prefix}
cookie, // boolean or {prefix, options}
initialState, // Object {}
ignoreExceptions //
}
and default to the following values:
{
vuex: {
namespace: 'storage'
},
cookie: {
prefix: '',
options: {
path: '/'
}
},
localStorage: {
prefix: ''
},
ignoreExceptions: false,
}
Full synchronise on start with initialState as default
Since version 0.4.0 this module allows full state synchronisation with cookies
, localStorage
and initialState
as a default value. That allows for a very neat usage pattern:
For example, if you have an initialState
like the following in your nuxt.config.js
file:
storage: {
initialState: { testParam: false }
}
then in my component I can simply declare (with decorators)
@State(s => s.storage.testParam)
testParam
or (with mapState)
computed: mapState({
testParam: s => s.storage.testParam
})
Afterwards you can get the computed property testParam
with whatever value it had in your last session and on change you just have to call this.$storage.setUniversal("testParam", newVal)
to get the new value saved.
Hidden settings (private state)
Private state is suitable to keep information not being exposed to the Vuex store. This helps prevent stealing tokens from the SSR response HTML.
If the key name starts with _
then that value is kept separate in the memory storage and not exposed to the Vuex store like the rest of the values.
For example:
$storage.setState("_password", "alpha1")
Api
$storage.getUniversal(key)
$storage.setUniversal(key, value)
$storage.syncUniversal(key, defaultValue)
$storage.removeUniversal(key)
$storage.getState(key)
$storage.setState(key, value)
$storage.removeState(key)
$storage.watchState(key, fn)
$storage.getLocalStorage(key)
$storage.setLocalStorage(key, value)
$storage.removeLocalStorage(key)
$storage.getCookies()
$storage.getCookie(key)
$storage.setCookie(key, value)
$storage.removeCookie(key)
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
yarn run dev
ornpm run dev
- Point your browser to
http://localhost:3000
Roadmap
- Add Encryption
- Universal Session Handling