Question

从 2.0.0-rc.4 版本开始，pinia 支持 Vue 2 和 Vue 3！ 这意味着，所有新更新都将应用于此版本 2，因此 Vue 2 和 Vue 3 用户都可以从中受益。 如果您使用的是 Vue 3，这不会为您带来任何改变，因为您已经在使用 rc，您可以查看 [the CHANGELOG]( https://github.com/vuejs/pinia/blob/v2/packages/pinia /CHANGELOG.md) 以获取更改的所有内容的详细说明。 否则，本指南适合您！

Deprecations

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

shell

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

如果您使用 ESLint，请考虑使用 this plugin 来查找所有已弃用的用法。 否则，您应该能够在它们看起来交叉时看到它们。 这些是已弃用的 API 已被删除：

• createStore() 变成 defineStore()
• 在订阅中， storeName 变为 storeId
• PiniaPlugin 更名为 PiniaVuePlugin （用于 Vue 2 的 Pinia 插件）
• $subscribe() 不再接受 boolean 作为第二个参数，而是使用 detached: true 传递一个对象。
• Pinia 插件不再直接接收商店的 id 。 请改用 store.$id 。

重大变化

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

shell

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<Id、State、Getters、Actions> ），您还应该使用 StoreGeneric ，因为没有泛型的 Store 类型会创建一个空存储 类型。

diff

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

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

DefineStoreOptions for plugins

如果您正在编写插件，使用 TypeScript，并扩展类型 DefineStoreOptions 以添加自定义选项，则应将其重命名为 DefineStoreOptionsBase 。 此类型将适用于设置商店和选项商店。

diff

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

PiniaStorePlugin was renamed

The type PiniaStorePlugin was renamed to PiniaPlugin .

diff

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

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

请注意，此更改只能在升级到不弃用的最新版 Pania 后完成。

@vue/composition-api version

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

shell

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

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)

这是由于 dist 文件的现代化以支持 Node.js 中的本机 ESM 模块。 文件现在使用扩展名 .mjs 和 .cjs 让 Node 从中受益。 要解决此问题，您有两种可能性：

• 如果您使用的是 Vue CLI 4.x，请升级您的依赖项。 这应该包括下面的修复。
  • 如果您无法升级，请将其添加到您的 vue.config.js 中：js

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

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

  // 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 文档 ( https://devtools.vuejs.org/guide/installation.html )。

Nuxt

如果你使用 Nuxt，pinia 现在有它专用的 Nuxt 包。 安装它：

shell

npm i @pinia/nuxt
# or with yarn
yarn add @pinia/nuxt

还要确保更新您的 @nuxtjs/composition-api 包。

如果您使用的是 TypeScript，然后调整您的 nuxt.config.js 和 tsconfig.json ：

diff

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

diff

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

还建议阅读 the dedicated Nuxt section 。