Pinia 快速開始

安裝

用你喜歡的包管理器安裝 pinia：

yarn add pinia
## 或者使用 npm
npm install pinia

:::tip 如果你的應(yīng)用使用的 Vue 版本低于 2.7，你還需要安裝組合式 API 包：@vue/composition-api。如果你使用的是 Nuxt，你應(yīng)該參考這篇指南。 :::

如果你正在使用 Vue CLI，你可以試試這個非官方插件。

創(chuàng)建一個 pinia 實例 (根 store) 并將其傳遞給應(yīng)用：

```js {2,5-6,8} 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，你還需要安裝一個插件，并在應(yīng)用的根部注入創(chuàng)建的 `pinia`：


```js
import { createPinia, PiniaVuePlugin } from 'pinia'


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


new Vue({
  el: '#app',
  // 其他配置...
  // ...
  // 請注意，同一個`pinia'實例
  // 可以在同一個頁面的多個 Vue 應(yīng)用中使用。 
  pinia,
})

這樣才能提供 devtools 的支持。在 Vue 3 中，一些功能仍然不被支持，如 time traveling 和編輯，這是因為 vue-devtools 還沒有相關(guān)的 API，但 devtools 也有很多針對 Vue 3 的專屬功能，而且就開發(fā)者的體驗來說，Vue 3 整體上要好得多。在 Vue 2 中，Pinia 使用的是 Vuex 的現(xiàn)有接口 (因此不能與 Vuex 一起使用) 。

Store 是什么？

Store (如 Pinia) 是一個保存狀態(tài)和業(yè)務(wù)邏輯的實體，它并不與你的組件樹綁定。換句話說，它承載著全局狀態(tài)。它有點像一個永遠(yuǎn)存在的組件，每個組件都可以讀取和寫入它。它有三個概念，state、getter 和 action，我們可以假設(shè)這些概念相當(dāng)于組件中的 data、 computed 和 methods。

應(yīng)該在什么時候使用 Store?

一個 Store 應(yīng)該包含可以在整個應(yīng)用中訪問的數(shù)據(jù)。這包括在許多地方使用的數(shù)據(jù)，例如顯示在導(dǎo)航欄中的用戶信息，以及需要通過頁面保存的數(shù)據(jù)，例如一個非常復(fù)雜的多步驟表單。

另一方面，你應(yīng)該避免在 Store 中引入那些原本可以在組件中保存的本地數(shù)據(jù)，例如，一個元素在頁面中的可見性。

并非所有的應(yīng)用都需要訪問全局狀態(tài)，但如果你的應(yīng)用確實需要一個全局狀態(tài)，那 Pinia 將使你的開發(fā)過程更輕松。