Question

安装方式

用你最喜欢的包管理器安装 pinia：

bash

yarn add pinia
# or with npm
npm install pinia

TIP

如果您的应用使用的是 Vue <2.7，您还需要安装组合 API：@vue/composition-api。 如果您使用 Nuxt，则应遵循 这些说明。

如果你使用的是 Vue CLI，你可以试试这个 非官方插件。 创建一个 pinia 实例（根存储）并将其作为插件传递给应用程序：

js

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 注入应用程序的根目录：

js

import { createPinia, PiniaVuePlugin } from 'pinia'

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

new Vue({
  el: '#app',
  // other options...
  // ...
  // 请注意，可以在同一页面上的多个 Vue 应用程序中使用相同的 `pinia` 实例
  pinia,
})

这也将添加 devtools 支持。 在 Vue 3 中，仍然不支持时间旅行和编辑等一些功能，因为 vue-devtools 尚未公开必要的 API，但 devtools 具有更多功能，并且整体开发人员体验要优越得多。 在 Vue 2 中，Pinia 使用 Vuex 的现有接口（因此不能与它一起使用）。

什么是商店？

一个商店（如 Pinia）是一个实体，它持有未绑定到您的组件树的状态和业务逻辑。 换句话说，它托管全局状态。 它有点像一个始终存在并且每个人都可以读取和写入的组件。 它有三个概念，state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的data、computed和methods。

我什么时候应该使用商店

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

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

并非所有应用程序都需要访问全局状态，但如果您需要一个，Pania 将使您的生活更轻松。