安装

使用您最喜欢的包管理工具安装Pinia：

yarn add pinia
# or with npm
npm install pinia

TIP 如果您的应用使用的是Vue 2，你还需要安装 composition api: @vue/composite-api。如果您正在使用Nuxt，也应遵循这些说明 (opens new window)。

如果你使用的是Vue CLI，你可以试试这个非官方的插件 (opens new window)。

创建一个pinia(根store)并将其传递给应用程序：

import { createPinia } from 'pinia'

app.use(createPinia())

如果您使用的是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,
})

这也将增加devtools支持。在Vue 3中，像时间旅行和编辑这样的功能仍然不被支持，因为vue-devtools尚未公开必要的 api，但devtools具有更多的功能，总体来说，开发人员的体验要优越得多。在Vue 2中，Pinia使用了Vuex的现有接口(因此不能与Vuex一起使用)。

什么是Store？

Store(如Pinia)是保存状态和业务逻辑的实体，它没有绑定到组件树。换句话说，它承载全局状态。它有点像一个总是存在的组件，每个人都可以读取和写入。它有三个核心概念，state (opens new window)、getters (opens new window) 和 actions (opens new window)，可以想当然地认为这些概念等同于组件中的data、computed 和methods。

什么时候应该使用Store

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

另一方面，你应该避免在store中包含可能托管在组件中的本地数据，例如，页面本地元素的可见性。

并不是所有的应用程序都需要访问全局状态，但是如果您需要，Pinia将使您的工作更轻松。