Pinia 從 0.x (v1) 遷移至 v2

從 0.x (v1) 遷移至 v2

從 2.0.0-rc.4 版本開始，pinia 同時支持 Vue 2 和 Vue 3！這意味著，v2 版本的所有更新，將會讓 Vue 2 和 Vue 3 的用戶都受益。如果你使用的是 Vue 3，這對你來說沒有任何改變，因為你已經(jīng)在使用 rc 版本，你可以查看發(fā)布日志來了解所有更新的詳細解釋。如果你使用的不是 Vue 3，那這個指南是為你準(zhǔn)備的!

棄用

讓我們來看看你需要對你的代碼做出的所有修改。首先，為了解所有棄用，確保你已經(jīng)在運行最新的 0.x 版本：

npm i 'pinia@^0.x.x'
## 或者使用 yarn
yarn add 'pinia@^0.x.x'

如果你正在使用 ESLint，可以考慮使用這個插件，來查找所有廢棄的用法。否則，你得手動檢查。這些都是被廢棄且已經(jīng)刪除了的 API：

• createStore() 變成 defineStore()
• 在訂閱中，storeName 變成 storeId
• PiniaPlugin 更名為 PiniaVuePlugin(Vue 2 的 Pinia 插件)
• $subscribe() 不再接受 boolean 作為第二個參數(shù)，而是傳遞一個帶有 detached: true 的對象。
• Pinia 插件不再直接接收 store 的 id。使用 store.$id 代替。

非兼容性更新

刪除下面這些后，你可以用下面命令升級到 V2 版了：

npm i 'pinia@^2.x.x'
## 或者使用 yarn
yarn add 'pinia@^2.x.x'

然后開始更新你的代碼。

通用 Store 類型

添加于 2.0.0-rc.0

用 StoreGeneric 取代 GenericStore 類型的全部用法。這是新的通用 store 類型，應(yīng)該可以接受任何類型的 store。如果你在寫函數(shù)時使用 Store 類型而不想傳遞其泛型 (例如Store<Id, State, Getters, Actions>)，你可以使用 StoreGeneric，因為沒有泛型的 Store 類型會創(chuàng)建一個空的 store 類型：

function takeAnyStore(store: Store) {} // [!code --]
function takeAnyStore(store: StoreGeneric) {} // [!code ++]
function takeAnyStore(store: GenericStore) {} // [!code --]
function takeAnyStore(store: StoreGeneric) {} // [!code ++]

針對插件的 DefineStoreOptions

如果你在用 TypeScript 寫插件并擴展了 DefineStoreOptions 類型來添加自定義選項，你應(yīng)該把它改名為 DefineStoreOptionsBase。這個類型將同時適用于 setup 和 option store。

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

PiniaStorePlugin 已被重命名

類型 PiniaStorePlugin 被重新命名為 PiniaPlugin。

import { PiniaStorePlugin } from 'pinia' // [!code --]
import { PiniaPlugin } from 'pinia' // [!code ++]
const piniaPlugin: PiniaStorePlugin = () => { // [!code --]
const piniaPlugin: PiniaPlugin = () => { // [!code ++]
  // ...
}

注意這個更新只能在升級到最新的沒有棄用的 Pinia 版本后生效。

@vue/composition-api 版本 %{#vue-composition-api-version}%

由于 pinia 目前依賴于 effectScope() ，你使用的 @vue/composition-api 的版本必須是 1.1.0 及以上：

npm i @vue/composition-api@latest
## 或者使用 yarn
yarn add @vue/composition-api@latest

支持 webpack 4 %{#webpack-4-support}%

如果你使用的是 webpack 4 (Vue CLI 使用的是 webpack 4)，你可能會遇到這樣的錯誤：

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)

這是構(gòu)建文件為支持 Node.js 中的原生 ESM 模塊進行的現(xiàn)代化適配。為更好地支持 Node，文件現(xiàn)在使用的擴展名是 .mjs 和 .cjs。要解決這個問題，你有兩種可用的方法：

• 如果你使用 Vue CLI 4.x，升級你的依賴。具體修復(fù)步驟如下。
  • 如果你不可能升級，請將下面的代碼添加到你的 vue.config.js 中：

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

Devtools

Pinia v2 不再劫持 Vue Devtools v5，它需要的是 Vue Devtools v6?？梢栽?Vue Devtools 文檔中找到該擴展 beta 版本的下載鏈接。

Nuxt

如果你正在使用 Nuxt，pinia 現(xiàn)在有了專門的 Nuxt 軟件包????。請用以下方法安裝它：

npm i @pinia/nuxt
## 或者使用 yarn
yarn add @pinia/nuxt

還要確保更新你的 @nuxtjs/composition-api 包。

如果你使用 TypeScript，還要調(diào)整你的 nuxt.config.js 和 tsconfig.json：

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

// tsconfig.json
{
  "types": [
    // ...
    "pinia/nuxt/types" // [!code --]
    "@pinia/nuxt" // [!code ++]
  ]
}