Vue中如何使用pinia

這篇文章主要介紹了Vue中如何使用pinia的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中如何使用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 的循環依賴。

• 沒有命名空間的模塊。鑒于商店的扁平架構，“命名空間”商店是其定義方式所固有的，您可以說所有商店都是命名空間的。

關于“Vue中如何使用pinia”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue中如何使用pinia”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。