开始

安装

Get the Pinia Cheat Sheet from Vue Mastery

用你喜欢的包管理器安装 pinia。从 v4 起，你还需要安装 @vue/devtools-api，它是 devtools 集成所需的对等依赖 (peer dependency)：

npm

npm install pinia @vue/devtools-api

yarn

yarn add pinia @vue/devtools-api

pnpm

pnpm add pinia @vue/devtools-api

bun

bun add pinia @vue/devtools-api

deno

deno add pinia @vue/devtools-api

TIP

如果你的应用使用的 Vue 版本低于 2.7，你还需要安装组合式 API 包：@vue/composition-api。如果你使用的是 Nuxt，你应该参考这篇指南。

Pinia 面向现代浏览器，并使用了 Object.hasOwn()。如果你需要支持旧版浏览器，请添加一个 polyfill，例如 core-js。

如果你正在使用 Vue CLI，你可以试试这个非官方插件。

创建一个 pinia 实例 (根 store) 并将其作为插件传递给应用：

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

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

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

Store 是什么？

Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

应该在什么时候使用 Store?

一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单。

另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性。

并非所有的应用都需要访问全局状态，但如果你的应用确实需要一个全局状态，那 Pinia 将使你的开发过程更轻松。

什么时候不应该使用 Store

有的时候我们会过度使用 store。如果觉得应用程序的 store 过多，你可能需要重新考虑使用 store 的目的。例如其中一些逻辑应该只是组合式函数，或者应该只是组件的本地状态。这在 Mastering Pinia 的 (不要) 滥用 store 课程中有详细介绍。