什么是pinia

Pinia 是一个轻量级、直观和可扩展的状态管理库，专为 Vue 3 设计。它提供了一个响应式的状态管理系统，可以轻松地在 Vue 3 应用程序中管理全局状态和局部状态。相对于 Vuex，Pinia 的设计更加简单和易于理解，同时还提供了一些新特性和更好的性能。

在 Pinia 中，状态被组织成一个或多个“存储库”（Store），每个存储库都包含一个状态对象、一组 getters、一组 actions 和一组 mutations。与 Vuex 不同的是，Pinia 不使用全局的 Store 实例，而是通过 createPinia 函数创建一个独立的 Pinia 实例，每个实例都可以拥有自己的存储库，使得状态管理更加模块化和可扩展。

Pinia 还支持插件系统，可以通过插件扩展 Pinia 的功能。例如，可以使用 pinia-plugin-persistedstate 插件将 Pinia 状态持久化到本地存储中，以便在页面刷新后仍然保留状态。

总的来说，Pinia 是一个简单、灵活和高效的状态管理库，它可以帮助 Vue 3 应用程序轻松地管理和共享状态，同时也提供了一些新特性和更好的性能。

什么是状态管理呢，具体可以阅读这篇文章，这篇文章详细介绍了vue的状态管理和在vue3中使用vuex

vuex与pinia对比

为什么要使用pinia

虽然我们的手动状态管理解决方案在简单的场景中已经足够了，但是在大规模的生产应用中还有很多其他事项需要考虑：

• 更强的团队协作约定
• 与 Vue DevTools 集成，包括时间轴、组件内部审查和时间旅行调试
• 模块热更新 (HMR)
• 服务端渲染支持

Pinia 就是一个实现了上述需求的状态管理库，由 Vue 核心团队维护，对 Vue 2 和 Vue 3 都可用。

现有用户可能对 Vuex 更熟悉，它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好，因此 Vuex 现在处于维护模式。它仍然可以工作，但不再接受新的功能。对于新的应用，建议使用 Pinia。

事实上，Pinia 最初正是为了探索 Vuex 的下一个版本而开发的，因此整合了核心团队关于 Vuex 5 的许多想法。最终，我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容，因此决定将其作为新的官方推荐。

相比于 Vuex，Pinia 提供了更简洁直接的 API，并提供了组合式风格的 API，最重要的是，在使用 TypeScript 时它提供了更完善的类型推导。

使用pinia

1. 安装 Pinia：在项目目录下执行 npm install pinia 命令来安装 Pinia。
2. 创建 Pinia 实例：在 src/store/index.js 文件中创建 Pinia 实例。

import { createPinia } from 'pinia'

export const store = createPinia()

store.state = {
  count: 0
}

store.getters = {
  doubleCount: state => state.count * 2
}

store.actions = {
  increment() {
    store.state.count++
  }
}

store.mutations = {
  resetCount() {
    store.state.count = 0
  }
}

在这个例子中，我们使用 createPinia 函数来创建一个 Pinia 实例。然后，我们在 store 实例上定义了一个 state 对象、一个 getters 对象、一个 actions 对象和一个 mutations 对象，用于管理状态、计算属性、异步操作和同步操作。

3. 在 main.js 中注册 store：在 src/main.js 文件中，注册并使用 store 实例。

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

在这个例子中，我们将 store 实例注册为 Vue 应用程序的插件，并在根组件上使用它。

4. 在组件中使用状态：在组件中使用 useStore 函数来访问状态。

在这个例子中，我们使用 useStore 函数来访问 store 实例，并从 store.state、store.getters、store.actions 和 store.mutations 中提取所需的属性和方法。在模板中，我们展示了计数器的值、双倍计数器的值，并提供了两个按钮来触发 increment 和 resetCount 方法。

除了基本用法外，Pinia 还提供了一些高级特性，如模块化和插件系统，可以帮助我们更好地组织和扩展状态管理。