Pinia 3.0来了，不支持vue2Hello，大家好，我是三千。昨晚Pinia升级了3.0版本，不支持vue2.

“技术进步的速度将比人们预期的要快，而且这种速度还在不断加速。”

Hello，大家好，我是三千。

昨晚Pinia升级了3.0版本，不支持vue2......

3.0里并没有发布新的功能，只是单纯的删除对VUE 2和其他弃用API的支持。对于大多数用户来说，它是可以直接升级的！ 🎉

什么是Pinia？

Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起，我们就倾向于同时支持 Vue 2 和 Vue 3，并且不强制要求开发者使用组合式 API，我们的初心至今没有改变。除了安装和 SSR 两章之外，其余章节中提到的 API 均支持 Vue 2 和 Vue 3。虽然本文档主要是面向 Vue 3 的用户，但在必要时会标注出 Vue 2 的内容，因此 Vue 2 和 Vue 3 的用户都可以阅读本文档。

为什么你应该使用 Pinia？

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：

测试工具集
插件：可通过插件扩展 Pinia 功能
为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
支持服务端渲染
Devtools 支持
- 追踪 actions、mutations 的时间线
- 在组件中展示它们所用到的 Store
- 让调试更容易的 Time travel
热更新
- 不必重载页面即可修改 Store
- 开发时可保持当前的 State

基本用法：

安装 Pinia：
```
npm install pinia
```

在 Vue 3 中配置 Pinia：首先，你需要在你的 Vue 应用中创建一个 Pinia 实例，并在应用中提供它。

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

创建一个 Store：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在组件中使用 Store：

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script setup>
import { useCounterStore } from './stores/counter'

const counter = useCounterStore()
</script>

结语

Pinia 在设计时力求简单易用，同时提供强大的功能，非常适合现代 Vue 应用开发。你可以通过它来轻松地管理跨组件的共享状态，并且保持应用的可维护性和灵活性。

以上就是今天与大家分享的全部内容，你的支持是我更新的最大动力，我们下期见！

打工人肝文章/视频不易，期待你一键三连的鼓励！！！

😐 这里是【程序员三千】，💻 一个喜欢捣鼓各种编程工具新鲜玩法的啊婆主。

🏠 已入驻：抖爸爸、b站、小红书（都叫【程序员三千】）

💽 编程/AI领域优质资源推荐 👉 www.yuque.com/xiaosanye-o…

Pinia 3.0来了，不支持vue2

什么是Pinia？

为什么你应该使用 Pinia？​

基本用法：

结语

为什么你应该使用 Pinia？