什麼是pinia？Vue中怎麼使用它？

什麼是pinia？為什麼要使用 Pinia？本篇文章就來帶大家瞭解一下pinia，通過範例介紹一下pinia的基本使用方法，希望對大家有所幫助！

什麼是Pinia？

Pinia最初是在 2019 年 11 月左右重新設計使用 Composition API的 Vue Store 外觀的實驗。從那時起，最初的原則仍然相同，但 Pinia 適用於 Vue 2 和 Vue 3 ，並且不需要你使用組合 API。除了安裝和SSR之外，兩者的 API 都是相同的，並且這些檔案針對 Vue 3 ，並在必要時提供有關 Vue 2 的註釋，以便 Vue 2 和 Vue 3 使用者可以閱讀！【相關推薦：】

為什麼要使用 Pinia？

Pinia 是 Vue 的儲存庫，它允許您跨元件/頁面共用狀態。ç 這對於單頁應用程式來說是正確的，但如果它是伺服器端呈現的，則會將您的應用程式暴露給安全漏洞。 但即使在小型單頁應用程式中，您也可以從使用 Pinia 中獲得很多好處：

開發工具支援
- 跟蹤動作、突變的時間表
- 商店出現在使用它們的元件中
- 時間旅行和更容易的偵錯
熱模組更換
- 在不重新載入頁面的情況下修改您的商店
- 在開發時保持任何現有狀態
外掛：使用外掛擴充套件 Pinia 功能
為 JS 使用者提供適當的 TypeScript 支援或自動完成功能
伺服器端渲染支援

基本範例

這就是使用 pinia 在 API 方面的樣子（請務必檢視入門以獲取完整說明）。您首先建立一個商店：

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // could also be defined as
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

然後在元件中使用它：

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // with autocompletion ✨
    counter.$patch({ count: counter.count + 1 })
    // or using an action instead
    counter.increment()
  },
}

你甚至可以使用一個函數（類似於一個元件setup()）來為更高階的用例定義一個 Store：

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

如果您仍然不熟悉setup()Composition API，請不要擔心，Pinia 還支援一組類似的地圖助手，例如 Vuex。您以相同的方式定義儲存，但隨後使用mapStores()、mapState()或mapActions()：

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

const useUserStore = defineStore('user', {
  // ...
})

export default {
  computed: {
    // other computed properties
    // ...
    // gives access to this.counterStore and this.userStore
    ...mapStores(useCounterStore, useUserStore)
    // gives read access to this.count and this.double
    ...mapState(useCounterStore, ['count', 'double']),
  },
  methods: {
    // gives access to this.increment()
    ...mapActions(useCounterStore, ['increment']),
  },
}

您將在核心概念中找到有關每個地圖助手的更多資訊。

為什麼選擇Pinia

Pinia（發音為/piːnjʌ/，如英語中的「peenya」）是最接近piña（西班牙語中的菠蘿）的詞，它是一個有效的包名稱。菠蘿實際上是一組單獨的花朵，它們結合在一起形成多個水果。與商店類似，每一家都是獨立誕生的，但最終都是相互聯絡的。它也是一種美味的熱帶水果，原產於南美洲。

一個更現實的例子

這是一個更完整的 API 範例，您將在 Pinia中使用型別，即使在 JavaScript 中也是如此。對於某些人來說，這可能足以在不進一步閱讀的情況下開始使用，但我們仍然建議您檢視檔案的其餘部分，甚至跳過此範例並在閱讀完所有核心概念後返回。

import { defineStore } from 'pinia'

export const todos = defineStore('todos', {
  state: () => ({
    /** @type {{ text: string, id: number, isFinished: boolean }[]} */
    todos: [],
    /** @type {'all' | 'finished' | 'unfinished'} */
    filter: 'all',
    // type will be automatically inferred to number
    nextId: 0,
  }),
  getters: {
    finishedTodos(state) {
      // autocompletion! ✨
      return state.todos.filter((todo) => todo.isFinished)
    },
    unfinishedTodos(state) {
      return state.todos.filter((todo) => !todo.isFinished)
    },
    /**
     * @returns {{ text: string, id: number, isFinished: boolean }[]}
     */
    filteredTodos(state) {
      if (this.filter === 'finished') {
        // call other getters with autocompletion ✨
        return this.finishedTodos
      } else if (this.filter === 'unfinished') {
        return this.unfinishedTodos
      }
      return this.todos
    },
  },
  actions: {
    // any amount of arguments, return a promise or not
    addTodo(text) {
      // you can directly mutate the state
      this.todos.push({ text, id: this.nextId++, isFinished: false })
    },
  },
})

與 Vuex 的比較

Pinia 試圖儘可能地接近 Vuex 的理念。它旨在測試 Vuex 下一次迭代的提案，並且取得了成功，因為我們目前有一個針對 Vuex 5 的開放 RFC，其 API 與 Pinia 使用的 API 非常相似。請注意，我 (Eduardo)，Pinia 的作者，是 Vue.js 核心團隊的一員，並積极參與了 Router 和 Vuex 等 API 的設計。我個人對這個專案的意圖是重新設計使用全球商店的體驗，同時保持 Vue 的平易近人的理念。我保持 Pinia 的 API 與 Vuex 一樣接近，因為它不斷向前發展，以使人們更容易遷移到 Vuex，甚至在未來融合兩個專案（在 Vuex 下）。

RFC

雖然 Vuex 通過 RFC 從社群收集儘可能多的反饋，但 Pinia 沒有。我根據我開發應用程式、閱讀其他人的程式碼、為使用 Pinia 的客戶工作以及在 Discord 上回答問題的經驗來測試想法。這使我能夠提供一種適用於各種情況和應用程式大小的有效解決方案。我經常釋出並在保持其核心 API 不變的同時使庫不斷髮展。

與 Vuex 3.x/4.x 的比較

Vuex 3.x 是 Vuex 的 Vue 2 而 Vuex 4.x 是 Vue 3

Pinia API 與 Vuex ≤4 有很大不同，即：

突變不再存在。他們經常被認為是非常冗長的。他們最初帶來了 devtools 整合，但這不再是問題。
無需建立自定義複雜包裝器來支援 TypeScript，所有內容都是型別化的，並且 API 的設計方式儘可能利用 TS 型別推斷。
不再需要注入魔法字串、匯入函數、呼叫它們，享受自動完成功能！
無需動態新增商店，預設情況下它們都是動態的，您甚至都不會注意到。請注意，您仍然可以隨時手動使用商店進行註冊，但因為它是自動的，您無需擔心。
不再有模組的巢狀結構。您仍然可以通過在另一個商店中匯入和使用商店來隱式巢狀商店，但 Pinia 通過設計提供平面結構，同時仍然支援商店之間的交叉組合方式。你甚至可以有 store 的迴圈依賴。
沒有名稱空間的模組。鑑於商店的扁平架構，「名稱空間」商店是其定義方式所固有的，您可以說所有商店都是名稱空間的。

有關如何將現有 Vuex ≤4 專案轉換為使用 Pinia 的更詳細說明，請參閱從 Vuex 遷移指南。

更多程式設計相關知識，請存取：！！

以上就是什麼是pinia？Vue中怎麼使用它？的詳細內容，更多請關注TW511.COM其它相關文章！