Migración desde 0.x (v1) a v2 ​

¡A partir de la versión 2.0.0-rc.4, pinia soporta tanto Vue 2 como Vue 3! Esto significa que todas las nuevas actualizaciones se aplicarán a esta versión 2 para que tanto los usuarios de Vue 2 como los de Vue 3 puedan beneficiarse de ella. Si estás usando Vue 3, esto no cambia nada para ti ya que ya estabas usando el rc y puedes revisar CHANGELOG para una explicación detallada de todo lo que cambió. ¡Si no, esta guía es para ti!

Características Obsoletas ​

Echemos un vistazo a todos los cambios que necesitas aplicar a tu código. En primer lugar, asegúrese de que ya está ejecutando la última versión 0.x para ver cualquier característica obsoleta:

npm i 'pinia@^0.x.x'
# o con yarn
yarn add 'pinia@^0.x.x'

npm i 'pinia@^0.x.x'
# o con yarn
yarn add 'pinia@^0.x.x'

Si estás usando ESLint, considera usar este plugin para encontrar todos los usos obsoletos. De lo contrario, deberías poder verlos tal y como aparecen cruzados. Estas son las APIs que estaban obsoletas y que fueron eliminadas:

• createStore() se convierte en defineStore()
• En suscripciones, storeName se convierte en storeId
• PiniaPlugin pasó a llamarse PiniaVuePlugin (Plugin Pinia para Vue 2)
• $subscribe() ya no acepta un boolean como segundo parámetro, En su lugar, pasa un objeto con detached: true.
• Los plugins de Pinia ya no reciben directamente el id del almacén. Utiliza store.$id en su lugar.

Cambios importantes ​

Después de eliminar estos, puedes actualizar a la v2 con:

npm i 'pinia@^2.x.x'
# o con yarn
yarn add 'pinia@^2.x.x'

npm i 'pinia@^2.x.x'
# o con yarn
yarn add 'pinia@^2.x.x'

Y empieza a actualizar tu código.

Tipo de almacén genérico ​

Agregado en 2.0.0-rc.0

Sustituya cualquier uso del tipo GenericStore por StoreGeneric. Este es el nuevo tipo de almacén genérico que debería aceptar cualquier tipo de almacén. Si estabas escribiendo funciones usando el tipo Store sin pasar sus genéricos (por ejemplo Store<Id, State, Getters, Actions>), deberías usar también StoreGeneric ya que el tipo Store sin genéricos crea un tipo store vacío.

function takeAnyStore(store: Store) {} 
function takeAnyStore(store: StoreGeneric) {} 

function takeAnyStore(store: GenericStore) {} 
function takeAnyStore(store: StoreGeneric) {} 

function takeAnyStore(store: Store) {} 
function takeAnyStore(store: StoreGeneric) {} 

function takeAnyStore(store: GenericStore) {} 
function takeAnyStore(store: StoreGeneric) {} 

DefineStoreOptions para plugins ​

Si estuvieras escribiendo plugins, usando TypeScript, y extendiendo el tipo DefineStoreOptions para añadir opciones personalizadas, deberías renombrarlo a DefineStoreOptionsBase. Este tipo se aplicará tanto a los almacenes de configuración como a los de opciones.

declare module 'pinia' {
  export interface DefineStoreOptions<S, Store> { 
  export interface DefineStoreOptionsBase<S, Store> { 
    debounce?: {
      [k in keyof StoreActions<Store>]?: number
    }
  }
}

declare module 'pinia' {
  export interface DefineStoreOptions<S, Store> { 
  export interface DefineStoreOptionsBase<S, Store> { 
    debounce?: {
      [k in keyof StoreActions<Store>]?: number
    }
  }
}

PiniaStorePlugin ha cambiado de nombre ​

El tipo PiniaStorePlugin ha cambiado de nombre a PiniaPlugin.

import { PiniaStorePlugin } from 'pinia' 
import { PiniaPlugin } from 'pinia' 

const piniaPlugin: PiniaStorePlugin = () => { 
const piniaPlugin: PiniaPlugin = () => { 
  // ...
}

import { PiniaStorePlugin } from 'pinia' 
import { PiniaPlugin } from 'pinia' 

const piniaPlugin: PiniaStorePlugin = () => { 
const piniaPlugin: PiniaPlugin = () => { 
  // ...
}

Tenga en cuenta que este cambio sólo se puede hacer después de actualizar a la última versión de Pinia sin características obsoletas.

Versión @vue/composition-api ​

Como pinia depende ahora de effectScope(), debes usar al menos la versión 1.1.0 de @vue/composition-api:

npm i @vue/composition-api@latest
# o con yarn
yarn add @vue/composition-api@latest

npm i @vue/composition-api@latest
# o con yarn
yarn add @vue/composition-api@latest

Soporte con webpack 4 ​

Si estás usando webpack 4 (Vue CLI usa webpack 4), puedes encontrar un error como este:

ERROR  Failed to compile with 18 errors

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'computed' from non EcmaScript module (only default export is available)

ERROR  Failed to compile with 18 errors

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'computed' from non EcmaScript module (only default export is available)

Esto se debe a la modernización de los archivos dist para soportar módulos ESM nativos en Node.js. Los archivos utilizan ahora la extensión .mjs y .cjs para que Node se beneficie de ello. Para solucionar este problema tienes dos posibilidades:

• Si estás utilizando Vue CLI 4.x, actualiza sus dependencias. Esto debería incluir la siguiente corrección.

  • Si la actualización no es posible para ti, añade esto a vue.config.js:

    js

    // vue.config.js
    module.exports = {
      configureWebpack: {
        module: {
          rules: [
            {
              test: /\.mjs$/,
              include: /node_modules/,
              type: 'javascript/auto',
            },
          ],
        },
      },
    }

    // vue.config.js
    module.exports = {
      configureWebpack: {
        module: {
          rules: [
            {
              test: /\.mjs$/,
              include: /node_modules/,
              type: 'javascript/auto',
            },
          ],
        },
      },
    }

• Si estás manejando manualmente webpack, tendrás que hacerle saber cómo manejar los archivos .mjs:

  js

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
      ],
    },
  }

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
      ],
    },
  }

Herramientas de desarrollo ​

Pinia v2 ya no utiliza Vue Devtools v5, se requiere Vue Devtools v6. Encuentra el enlace de descarga en la documentación de Vue Devtools para el canal beta de la extensión.

Nuxt ​

Si estás utilizando Nuxt, pinia tiene ahora su paquete Nuxt específico 🎉. Instálalo con:

npm i @pinia/nuxt
# o con yarn
yarn add @pinia/nuxt

npm i @pinia/nuxt
# o con yarn
yarn add @pinia/nuxt

Asegúrate también de actualizar tu paquete @nuxtjs/composition-api.

Luego adapta tu nuxt.config.js y tu tsconfig.json si estás usando TypeScript:

// nuxt.config.js
module.exports {
  buildModules: [
    '@nuxtjs/composition-api/module',
    'pinia/nuxt', 
    '@pinia/nuxt', 
  ],
}

// nuxt.config.js
module.exports {
  buildModules: [
    '@nuxtjs/composition-api/module',
    'pinia/nuxt', 
    '@pinia/nuxt', 
  ],
}

// tsconfig.json
{
  "types": [
    // ...
    "pinia/nuxt/types" 
    "@pinia/nuxt" 
  ]
}

// tsconfig.json
{
  "types": [
    // ...
    "pinia/nuxt/types" 
    "@pinia/nuxt" 
  ]
}

También se recomienda leer la sección dedicada a Nuxt.