Міграція з 0.x (v1) to v2

Починаючи з версії 2.0.0-rc.4, pinia підтримує як Vue 2, так і Vue 3! Це означає, що всі нові оновлення будуть застосовані до цієї версії 2, тому користувачі і Vue 2, і Vue 3 зможуть скористатися цим. Якщо ви використовуєте Vue 3, це нічого не змінить для вас, оскільки ви вже використовували rc, і ви можете перевірити CHANGELOG для детального пояснення всіх змін. В іншому випадку, цей посібник для вас!

Застаріле

Давайте розглянемо всі зміни, які потрібно застосувати до коду. По-перше, переконайтеся, що ви вже використовуєте останню версію 0.x, щоб побачити будь-які застарілі використання:

shell

npm i 'pinia@^0.x.x'
# або з yarn
yarn add 'pinia@^0.x.x'

npm i 'pinia@^0.x.x'
# або з yarn
yarn add 'pinia@^0.x.x'

Якщо ви використовуєте ESLint, подумайте про використання цього плагіна, щоб знайти всі застарілі використання. В іншому випадку ви зможете побачити їх так, як вони виглядають перехрещеними. Це API, які були застарілими та були видалені:

createStore() стало defineStore()
У підписках storeName стало storeId
PiniaPlugin було перейменовано на PiniaVuePlugin (плагін Pinia для Vue 2)
$subscribe() більше не приймає boolean як другий параметр, натомість передайте об'єкт із detached: true.
Плагіни Pinia більше не отримують напряму id сховища. Натомість використовуйте store.$id.

Несумісні оновлення

Після їх видалення ви можете оновити до v2 за допомогою:

shell

npm i 'pinia@^2.x.x'
# або з yarn
yarn add 'pinia@^2.x.x'

npm i 'pinia@^2.x.x'
# або з yarn
yarn add 'pinia@^2.x.x'

І почніть оновлювати свій код.

Загальний тип сховища

Додано в 2.0.0-rc.0

Замініть будь-яке використання типу GenericStore на StoreGeneric. Це новий загальний тип сховища, який повинен приймати будь-який тип сховища. Якщо ви писали функції, використовуючи тип Store, не вказуючи його загального типу (наприклад, Store<Id, State, Getters, Actions>), ви також маєте використовувати StoreGeneric оскільки тип Store без загального створює порожнє сховище типу.

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` для плагінів

Якщо ви писали плагіни, використовуючи TypeScript, і розширювали тип DefineStoreOptions, щоб додати власні властивості, вам слід перейменувати його на DefineStoreOptionsBase. Цей тип буде застосовано як до сховищ setup, так і до опційних сховищ.

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` було перейменовано

Тип PiniaStorePlugin було перейменовано на 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 = () => { 
  // ...
}

Зверніть увагу, що цю зміну можна внести лише після оновлення до останньої версії Pinia без застарілостей.

Версія `@vue/composition-api`

Оскільки pinia тепер покладається на effectScope(), ви повинні використовувати принаймні версію 1.1.0 @vue/composition-api:

shell

npm i @vue/composition-api@latest
# або з yarn
yarn add @vue/composition-api@latest

npm i @vue/composition-api@latest
# або з yarn
yarn add @vue/composition-api@latest

Підтримка webpack 4

Якщо ви використовуєте webpack 4 (Vue CLI використовує webpack 4), ви можете зіткнутися з такою помилкою:

ERROR  Не вдалося скомпілювати з 18 помилками

 помилка в ./node_modules/pinia/dist/pinia.mjs

Не вдається імпортувати іменований експорт 'computed' з не EcmaScript модуля (доступний лише експорт за умовчанням)

ERROR  Не вдалося скомпілювати з 18 помилками

 помилка в ./node_modules/pinia/dist/pinia.mjs

Не вдається імпортувати іменований експорт 'computed' з не EcmaScript модуля (доступний лише експорт за умовчанням)

Це пов'язано з модернізацією файлів dist для підтримки власних модулів у Node.js. Файли тепер використовують розширення .mjs і .cjs, щоб Node мав переваги від цього. Щоб вирішити цю проблему, у вас є такі можливості:

Якщо ви використовуєте Vue CLI 4.x, оновіть свої залежності. Це повинно включати виправлення нижче.

Якщо оновлення неможливе для вас, додайте це до свого vue.config.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',
        },
      ],
    },
  },
}

Якщо ви вручну обробляєте webpack, вам доведеться повідомити йому, як обробляти файли .mjs:

// 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',
      },
    ],
  },
}

Інструменти розробника

Pinia v2 більше не захоплює Vue Devtools v5, для цього потрібен Vue Devtools v6. Знайдіть посилання для завантаження в Документації Vue Devtools для бета-каналу розширення.

Nuxt

Якщо ви використовуєте Nuxt, у pinia тепер є свій власний спеціальний пакет Nuxt 🎉. Встановіть його за допомогою:

bash

npm i @pinia/nuxt
# або з yarn
yarn add @pinia/nuxt

npm i @pinia/nuxt
# або з yarn
yarn add @pinia/nuxt

Також переконайтеся, що оновили свій пакет @nuxtjs/composition-api.

Потім адаптуйте ваш nuxt.config.js та tsconfig.json, якщо ви використовуєте 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', 
  ],
}

json

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

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

Також рекомендується прочитати спеціальний розділ Nuxt.

Міграція з 0.x (v1) to v2 ​

Застаріле ​

Несумісні оновлення ​

Загальний тип сховища ​

DefineStoreOptions для плагінів ​

PiniaStorePlugin було перейменовано ​

Версія @vue/composition-api ​

Підтримка webpack 4 ​

Інструменти розробника ​

Nuxt ​

Міграція з 0.x (v1) to v2

Застаріле

Несумісні оновлення

Загальний тип сховища

`DefineStoreOptions` для плагінів

`PiniaStorePlugin` було перейменовано

Версія `@vue/composition-api`

Підтримка webpack 4

Інструменти розробника

Nuxt