从 0.x (v1) 迁移到 v2

从 2.0.0-rc.4 支持版本开始，pinia对Vue 2和Vue 3都支持！这意味着，所有最新的更新都将应用于V2版本，因此Vue 2和Vue 3用户都能从中受益。如果您使用的是Vue 3，这不会为您带来任何改变，因为您已经在使用rc，您可以查看CHANGELOG以获取所有更改的详细说明。否则，这篇指南就是为您准备的!

弃用的部分

让我们看看需要应用到代码中的所有变更。首先，请确保您已经在运行最新的0.x版本以查看弃用的内容：

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

如果您正在使用ESLint，请考虑使用此插件来找到所有已弃用的内容。否则，您应该相互对比查看它们之间相同的内容。下面是那些已弃用并被移除的API：

  • createStore()变成defineStore()
  • 订阅中的storeName变成storeId
  • PiniaPlugin被重命名为PiniaVuePlugin(用于Vue 2的Pinia插件）
  • $subscribe()不再接受布尔值作为第二个参数，而是通过传递一个对象detached: true代替。
  • Pinia插件不再直接接收store的id。使用store.$id代替。

重大的变更

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

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

并开始更新您的代码。

Store 泛型

2.0.0-rc.0中新增

所有该类型的用法已由StoreGeneric替换为GenericStore。这是新的store泛型，它能够接受任何类型的store。如果您使用store类型编写函数而没传递其泛型（如 Store<Id, State, Getters, Actions>），您应该使用StoreGeneric作为没有泛型Store的类型，并创建一个空的store类型。

  1. -function takeAnyStore(store: Store) {}
  2. +function takeAnyStore(store: StoreGeneric) {}
  4. -function takeAnyStore(store: GenericStore) {}
  5. +function takeAnyStore(store: StoreGeneric) {}

专为插件的 DefineStoreOptions

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

  1. declare module 'pinia' {
  2. -  export interface DefineStoreOptions<S, Store> {
  3. +  export interface DefineStoreOptionsBase<S, Store> {
  4.      debounce?: {
  5.        [k in keyof StoreActions<Store>]?: number
  6.      }
  7.    }
  8.  }

PiniaStorePlugin 被重命名

类型PiniaStorePlugin已重命名为PiniaPlugin。

  1. -import { PiniaStorePlugin } from 'pinia'
  2. +import { PiniaPlugin } from 'pinia'
  4. -const piniaPlugin: PiniaStorePlugin = () => {
  5. +const piniaPlugin: PiniaPlugin = () => {
  6.    // ...
  7.  }

请注意，此变更能生效的前提是，将Pinia升级到最新版本。

@vue/composition-api 版本

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

  1. npm i @vue/composition-api@latest
  2. # or with yarn
  3. yarn add @vue/composition-api@latest

webpack 4 支持

如果您使用的是webpack 4（Vue CLI使用webpack 4），您可能会遇到如下错误：

  1. ERROR  Failed to compile with 18 errors
  3.  error  in ./node_modules/pinia/dist/pinia.mjs
  5. 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：
  1. // vue.config.js
  2. module.exports = {
  3.   configureWebpack: {
  4.     module: {
  5.       rules: [
  6.         {
  7.           test: /\.mjs$/,
  8.           include: /node_modules/,
  9.           type: 'javascript/auto',
  10.         },
  11.       ],
  12.     },
  13.   },
  14. }
  • 如果您手动处理webpack，您必须让它知道如何处理.mjs文件：
  1. // webpack.config.js
  2. module.exports = {
  3.   module: {
  4.     rules: [
  5.       {
  6.         test: /\.mjs$/,
  7.         include: /node_modules/,
  8.         type: 'javascript/auto',
  9.       },
  10.     ],
  11.   },
  12. }

开发工具

Pinia v2不再支持Vue Devtools v5，它需要Vue Devtools v6。在Vue Devtools 文档中找到该扩展beta通道的下载链接。

Nuxt

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

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

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

如果您使用的是TypeScript，请调整您nuxt.config.js和tsconfig.json的配置：

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

还建议您阅读Nuxt专用章节。