Soporte para Nuxt.js

La configuración de este plugin con Nuxt.js es extremadamente simple y fácil.

Instalación

El proceso de instalación es el mismo que sigues para Vue.js:

1
npm install --save store vue-warehouse

o

1
yarn add store vue-warehouse

Configuración

Básica

Añade vue-warehouse/nuxt a la sección de módulos de nuxt.config.js

1
2
3
4
5
{
  modules: [
    'vue-warehouse/nuxt'
  ]
}

Si no se especifica ninguna opción, require('store/dist/store.modern') se utilizará como un store predeterminado, que solo admite navegadores modernos. No se definirá ningún complemento o motor personalizado.

Complementos (plugins)

Puede sdefinir complementos que indiquen la ubicación dentro de la estructura de tu proyecto o un paquete npm.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  modules: [
    ['vue-warehouse/nuxt',
      {
        plugins: [
          '~utils/my-custom-plugin',
          'store/plugins/expire',
          'store/plugins/defaults'
        ]
      }
    ],
  ]
}

Nota: Vue.js Warehouse incluirá cada una de esas ubicaciones de complementos como módulos, de la siguiente manera:
require('plugin-location-here').

Almacenamientos (storages)

Puedes definir almacenamientos de la misma manera que defines los complementos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  modules: [
    ['vue-warehouse/nuxt',
      {
        storages: [
          '~utils/my-custom-storage',
          'store/storages/localStorage',
          'store/storages/cookieStorage'
        ]
      }
    ],
  ]
}

Motor personalizado

Definir un motor personalizado no es muy diferente a la definición de complementos y almacenamientos:

1
2
3
4
5
6
7
8
9
{
  modules: [
    ['vue-warehouse/nuxt',
      {
        engine: '~utils/my-custom-engine'
      }
    ],
  ]
}

Nombre personalizado del módulo

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

1
2
3
4
5
6
7
8
9
{
  modules: [
    ['vue-warehouse/nuxt',
      {
        moduleName: 'baulDeLosRecuerdos'
      }
    ],
  ]
}

Uso

Dentro de una instancia de Vue o en el contexto de Nuxt.js, tienes acceso a la instancia de vue-warehouse como $warehouse. Por ejemplo:

Instancia de Vue:

1
2
3
4
5
// Almacena el usuario actual
this.$warehouse.set('user', { name:'Marcus' })

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

Contexto de Nuxt.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
export default {
  asyncData (context) {
    const userId = context.$warehouse.get('userId')

    return axios.get(`https://my-api/user/${userId)}`)
    .then((res) => {
      return { name: res.data.name }
    })
  }
}

Soporte para Vuex

Los cambios de los valores almacenados en el navegador del usuario (localStorage, cookie, etc.) se pueden sincronizar con el estado de Vuex. Puedes activar esta función de la siguiente manera:

1
2
3
4
5
6
7
8
9
{
  modules: [
    ['vue-warehouse/nuxt',
      {
        vuex: true
      }
    ],
  ]
}

Opcionalmente, puedes establecer un nombre personalizado para el estado en Vuex:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  modules: [
    ['vue-warehouse/nuxt',
      {
        vuex: {
          moduleName: 'vuexbaulDeLosRecuerdos'
        }
      }
    ],
  ]
}

Uso Avanzado

Para obtener una guía completa sobre cómo usar este complemento, ve a la página Primeros Pasos.

Opciones

A continuación se muestran todas las opciones disponibles que puedes usar con Nuxt.js.

Nombre Tipo Descripción
moduleName Cadena de Caracteres El nombre utilizado para acceder al módulo en una instancia de Vue.
Valor por defecto: warehouse
store Cadena de Caracteres Un *store* reúne el motor, los almacenamientos y los complementos
engine Cadena de Caracteres Un motor crea la API
storages Un Array de Cadenas de Caracteres Una lista de almacenamientos. Un almacenamiento define dónde se almacenarán los datos.
plugins Un Array de Cadenas de Caracteres Una lista de complementos. Un complemento extiende la funcionalidad predeterminada de almacenamiento de clave/valor.
vuex Un Buleano o Un Objeto Agregue compatibilidad para sincronizar los cambios de valores almacenados con el estado Vuex.