从 0.x (v1) 迁移到 v2

从 2.0.0-rc.4 版本开始，pinia 支持 Vue 2 和 Vue 3！这意味着所有新的更新都将应用于此 v2 版本，以便 Vue 2 和 Vue 3 用户都能从中受益。如果您使用的是 Vue 3，这对您来说没有任何改变，因为您已经在使用 rc 版本，您可以查看 变更日志 以详细了解所有更改。否则，本指南适合您！

弃用

让我们看看您需要对代码进行的所有更改。首先，确保您已经在运行最新的 0.x 版本以查看任何弃用

npm i 'pinia@^0.x.x'
# or with yarn
yarn add 'pinia@^0.x.x'

如果您使用的是 ESLint，请考虑使用 此插件 来查找所有弃用的用法。否则，您应该能够看到它们，因为它们显示为已删除。以下是被弃用并已删除的 API

• createStore() 变为 defineStore()
• 在订阅中，storeName 变为 storeId
• PiniaPlugin 重命名为 PiniaVuePlugin（Pinia 的 Vue 2 插件）
• $subscribe() 不再接受布尔值作为第二个参数，请改用带有 detached: true 的对象。
• Pinia 插件不再直接接收 Store 的 id。请改用 store.$id。

重大变更

删除这些后，您可以使用以下命令升级到 v2

npm i 'pinia@^2.x.x'
# or with yarn
yarn add 'pinia@^2.x.x'

并开始更新您的代码。

通用 Store 类型

在 2.0.0-rc.0 中添加

将任何使用 GenericStore 类型的代码替换为 StoreGeneric。这是新的通用 Store 类型，应该接受任何类型的 Store。如果您正在使用 Store 类型编写函数，但没有传递其泛型（例如 Store<Id, State, Getters, Actions>），您也应该使用 StoreGeneric，因为没有泛型的 Store 类型会创建一个空 Store 类型。

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

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

插件的 DefineStoreOptions

如果您正在使用 TypeScript 编写插件，并扩展 DefineStoreOptions 类型以添加自定义选项，您应该将其重命名为 DefineStoreOptionsBase。此类型将应用于 setup 和 options Store。

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 = () => {
  // ...
}

请注意，此更改只能在升级到最新版本的 Pinia（没有弃用）后才能进行.

@vue/composition-api 版本

由于 pinia 现在依赖于 effectScope()，您必须使用至少 1.1.0 版本的 @vue/composition-api

npm i @vue/composition-api@latest
# or with yarn
yarn add @vue/composition-api@latest

webpack 4 支持

如果您使用的是 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)

这是由于 dist 文件的现代化以支持 Node.js 中的原生 ESM 模块。文件现在使用 .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',
            },
          ],
        },
      },
    }

• 如果您手动处理 webpack，您将必须让它知道如何处理 .mjs 文件

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

开发者工具

Pinia v2 不再劫持 Vue 开发者工具 v5，它需要 Vue 开发者工具 v6。在 Vue 开发者工具文档 中找到扩展程序的测试版通道的下载链接。

Nuxt

如果您使用的是 Nuxt，pinia 现在有自己的专用 Nuxt 包 🎉。使用以下命令安装它

npm i @pinia/nuxt
# or with 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',
  ],
}

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

还建议您阅读 专门的 Nuxt 部分。