入门

安装

获取来自 Vue Mastery 的 Pinia 速查表

使用您喜欢的包管理器安装 pinia

yarn add pinia
# or with npm
npm install pinia

提示

如果您的应用程序使用的是 Vue <2.7，您还需要安装组合 API：@vue/composition-api。如果您使用的是 Nuxt，您应该按照 这些说明 操作。

如果您使用的是 Vue CLI，您可以尝试使用这个 非官方插件。

创建一个 pinia 实例（根存储）并将其作为插件传递给应用程序

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')

如果您使用的是 Vue 2，您还需要安装一个插件并在应用程序的根目录注入创建的 pinia

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // other options...
  // ...
  // note the same `pinia` instance can be used across multiple Vue apps on
  // the same page
  pinia,
})

这也会添加开发者工具支持。在 Vue 3 中，一些功能（如时间旅行和编辑）仍然不支持，因为 vue-devtools 尚未公开必要的 API，但开发者工具具有更多功能，整体开发体验要好得多。

什么是 Store？

Store（如 Pinia）是一个实体，它保存着状态和业务逻辑，这些逻辑与您的组件树无关。换句话说，它承载着全局状态。它有点像一个始终存在的组件，每个人都可以读取和写入。它有三个概念，状态、获取器 和 动作，可以安全地假设这些概念等同于组件中的 data、computed 和 methods。

我什么时候应该使用 Store？

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

另一方面，您应该避免在 Store 中包含可以在组件中托管的本地数据，例如页面中某个元素的可见性。

并非所有应用程序都需要访问全局状态，但如果您的应用程序需要，Pinia 会让您的生活更轻松。

我什么时候不应该使用 Store？

有时我们会过度使用 Store。如果您感觉您的应用程序过度使用 Store，您可能需要重新考虑 Store 的用途。具体来说，如果某些逻辑应该只是可组合函数，或者某些状态应该在组件中本地化。在 Mastering Pinia 的 （不）过度使用 Store 课程中对此进行了深入介绍。