什麼是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 使用者可以閱讀！ 【相關推薦：vue.js影片教學】

為什麼要使用 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中怎麼使用它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！