Vue.js Warehouse

Almacenamiento entre navegadores para Vue.js and Nuxt.js, con soporte de complementos y fácil extensibilidad basado en Store.js.

Este plugin seleccionará el mejor almacenamiento de navegador disponible, y automáticamente regresa al primer almacenamiento disponible que funcione.

Caracteristicas

  • Respaldado por la gran librería Store.js
  • Soporte para múltiples almacenamientos (localStorage, cookies, etc.)
  • Funcionalidad básica de almacenamiento de clave/valor (get/set/remove/each)
  • Fácil integración con Vue.js
  • Soporte para Nuxt.js
  • Recibe notificaciónes con Vuex cuando cambien los valores almacenados

Por qué usar este plugin

Algunas razones por las que podrías considerar usar este complemento:

  • Usar un método de almacenamiento de navegador alternativo en caso de que el navegador del usuario tenga limitaciones. Safari en modo privado puede denegar la escritura de datos en localStorage.
  • Fácil extensibilidad con complementos. Soporte para expirar valores almacenados en un momento dado, declarar valores predeterminados, etc.
  • Una API consistente en todos los navegadores para una funcionalidad de almacenamiento de clave/valor.
  • Definición fácil de métodos de almacenamiento alternativos. Por ejemplo: puede reutilizar un Componente Vue, que depende de en un método de almacenamiento, en el navegador del usuario (usando localStorage) o una aplicación móvil (usando el módulo application-settings de NativeScript) simplemente cambiando el método de almacenamiento sin modificar la lógica interna del componente.
  • Sincronización de los cambios de los valores almacenados con Vuex.

Instalación

Este módulo se distribuye a través de npm el cual es armado con node y debería ser instalado como una de las dependencias de tu proyecto:

npm install --save store vue-warehouse

o

yarn add store vue-warehouse

Uso

Carga a VueWarehouse en tu aplicación global de Vue y define un store predeterminado.

import Vue from 'vue'
import VueWarehouse from 'vue-warehouse'
import Store from 'store'

Vue.use(VueWarehouse, {
  store: Store
})

Un store expone una API simple para almacenamiento local entre navegadores. En este ejemplo, import Store from 'store' carfa el store predeterminado por Store.js.

Dentro de una instancia de Vue, tienes acceso a la instancia de vue-warehouse como $warehouse. Por lo tanto, puedes llamar:

// Almacenar el usuario actual
this.$warehouse.set('user', { name: 'John Doe' })

// Obtiene usuario actual
this.$warehouse.get('user')

// Eliminar usuario actual
this.$warehouse.remove('user')

// Borrar todas las claves
this.$warehouse.clearAll()

// Loop sobre todos los valores almacenados
this.$warehouse.each(function(value, key) {
	console.log(key, '==', value)
})

Complementos (plugins)

Cualquier complemento compatible con Store.js se puede usar. Puedes crear un complemento personalizado o usar cualquiera de esta lista.

Veamos un ejemplo donde puedes definir una fecha de vencimiento y valores predeterminados:

import Vue from 'vue'
import VueWarehouse from 'vue-warehouse'

Vue.use(VueWarehouse, {
  store: require('store'),
  plugins: [
    require('store/plugins/expire'),
    require('store/plugins/defaults')
  ]
})

Luego, puedes llamar el API en una instancia de Vue:

// Define valores predeterminados
this.$warehouse.defaults({ user: { name: 'John Doe' } })

// Obtiene usuario actual
this.$warehouse.get('user') // -> { name: 'John Doe' }

// Cambiar el usuario actual con una fecha de vencimiento de 2 horas a partir de ahora
const expiration = new Date().getTime() + (3600 * 2000)
this.$warehouse.set('user', { name:'Jane Doe' }, expiration)

// Obtiene la caducidad del usuario actual
this.$warehouse.getExpiration('user')

// Elimina usuario actual
this.$warehouse.remove('user') // devuelve el valor predeterminado -> { name: 'John Doe' }

Almacenamientos (storages)

Se puede usar cualquier almacenamiento que sea compatible con Store.js. Se escogerá el mejor almacenamiento disponible y automáticamente volverá al primer almacenamiento disponible que funcione.

Un Almacenamiento básicamente define dónde se almacenarán los datos. Puedes crear un almacenamiento personalizado o usas alguno de esta lista.

Supongamos que deseas utilizar localStorage de forma predeterminada y cookies como alternativa en caso de que el navegador de tu usuario no permita ninguna interacción con localStorage (modo privado de Safari).

import Vue from 'vue'
import VueWarehouse from 'vue-warehouse'
import Store from 'store'

Vue.use(VueWarehouse, {
  store: Store,
  plugins: [
    require('store/plugins/expire')
  ],
  storages: [
    require('store/storages/localStorage'),
    require('store/storages/cookieStorage')
  ]
})

Store Personalizado

Puede crear store personalizados como se describe acá y enviarlo a Vue.js Warehouse usando dos métodos diferentes. Por ejemplo:

Definir un motor (engine), almacenamientos (storages) y complementos (plugins)

// Define un motor, almacenamientos y complementos
const engine = require('store/src/store-engine')
const storages = [
	require('store/storages/localStorage'),
	require('store/storages/cookieStorage')
]
const plugins = [
	require('store/plugins/defaults'),
	require('store/plugins/expire')
]
// ...

Método #1

Usando el atributo store:

import Vue from 'vue'
import VueWarehouse from 'vue-warehouse'

// ... [definicion del motor, almacenamientos y complementos acá]

Vue.use(VueWarehouse, {
  store: engine.createStore(storages, plugins)
})

Method #2

O dejar que Vue.js Warehouse cree el store por tí:

import Vue from 'vue'
import VueWarehouse from 'vue-warehouse'

// ... [definicion del motor, almacenamientos y complementos acá]

Vue.use(VueWarehouse, {
  engine: engine,
  plugins: plugins,
  storages: storages
})

Nota

Si defines la propiedad storages, debes deininir un motoro (engine). Los complementos son siempre opcionales.

Nombre personalizado del módulo

Si por algún motivo deseas cambiar el nombre del módulo, puedes hacerlo de esta manera:

import Vue from 'vue'
import VueWarehouse from 'vue-warehouse'
import Store from 'store'

Vue.use(VueWarehouse, {
  store: Store,
  moduleName: 'baulDeLosRecuerdos'
})

Ahora puedes acceder al API de esta manera:

// Almacena el usuario actual
this.$baulDeLosRecuerdos.set('user', { name: 'John Doe' })

// Obtiene el usuario actual
this.$baulDeLosRecuerdos.get('user')

// Elimina el usuario actual
this.$baulDeLosRecuerdos.remove('user')

// Borrar todas las claves
this.$baulDeLosRecuerdos.clearAll()

Opciones

A continuación se encuentran todas las opciones compatibles con que puedes jugar.

Nombre Tipo Descripción
moduleName String El nombre utilizado para acceder al módulo en una instancia de Vue.
Valor por defecto: warehouse
store Object Un *store* reúne el motor, los almacenamientos y los complementos
engine Object Un motor crea la API
storages Array of objects Una lista de almacenamientos. Un almacenamiento define dónde se almacenarán los datos.
plugins Array of objects Una lista de complementos. Un complemento extiende la funcionalidad predeterminada de almacenamiento de clave/valor.