# 从 0.x (v1) 迁移到 v2

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

# 弃用的部分

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

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

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

createStore()变成defineStore()
订阅中的storeName变成storeId
PiniaPlugin被重命名为PiniaVuePlugin(用于Vue 2的Pinia插件）
$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中新增 (opens new window)

所有该类型的用法已由StoreGeneric替换为GenericStore。这是新的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 stores都适用。

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()，因此您使用@vue/composition-api的版本至少为 1.1.0：

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 Devtools v5，它需要Vue Devtools v6。在Vue Devtools 文档 (opens new window)中找到该扩展beta通道的下载链接。

# Nuxt

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

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

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

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

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

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

还建议您阅读Nuxt专用章节 (opens new window)。

← 组合Stores