Pinia 中文手册

Appearance

Return to top
目录导航

Migrating from 0.x (v1) to v2

从 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'
1
2
3

如果您使用 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'
1
2
3

并开始更新您的代码。

通用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) {}
1
2
3
4
5

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
     }
   }
 }
1
2
3
4
5
6
7
8

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 = () => {
   // ...
 }
1
2
3
4
5
6
7

请注意，此更改只能在升级到不弃用的最新版 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
1
2
3

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)
1
2
3
4
5

这是由于 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',
        },
      ],
    },
  },
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
  • 如果你手动处理 webpack，你必须让它知道如何处理 .mjs 文件：
    js
    // webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      },
    ],
  },
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

Devtools

Pinia v2 不再劫持 Vue Devtools v5，它需要 Vue Devtools v6 免费下载 Vue Devtools 文档 (https://devtools.vuejs.org/guide/installation.html#chrome)。

Nuxt

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

shell
npm i @pinia/nuxt
# or with yarn
yarn add @pinia/nuxt
1
2
3

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

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

diff
 // nuxt.config.js
 module.exports {
   buildModules: [
     '@nuxtjs/composition-api/module',
-    'pinia/nuxt',
+    '@pinia/nuxt',
   ],
 }
1
2
3
4
5
6
7
8
diff
 // tsconfig.json
 {
   "types": [
     // ...
-    "pinia/nuxt/types"
+    "@pinia/nuxt"
   ]
 }
1
2
3
4
5
6
7
8

还建议阅读 the dedicated Nuxt section。