Vue中如何使用pinia

這篇文章主要介紹了Vue中如何使用pinia的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中如何使用pinia文章都會有所收獲，下面我們一起來看看吧。

什么是Pinia？

Pinia最初是在 2019 年 11 月左右重新設(shè)計使用   Composition API的 Vue Store 外觀的實驗。從那時起，最初的原則仍然相同，但 Pinia 適用于 Vue 2 和 Vue 3  ，并且不需要你使用組合 API。除了安裝和SSR之外，兩者的 API 都是相同的，并且這些文檔針對 Vue 3 ，并在必要時提供有關(guān) Vue 2 的注釋，以便 Vue 2 和 Vue 3 用戶可以閱讀！

為什么要使用 Pinia？

Pinia 是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)。? 這對于單頁應(yīng)用程序來說是正確的，但如果它是服務(wù)器端呈現(xiàn)的，則會將您的應(yīng)用程序暴露給安全漏洞。 但即使在小型單頁應(yīng)用程序中，您也可以從使用 Pinia 中獲得很多好處：

• 開發(fā)工具支持

• 跟蹤動作、突變的時間表

• 商店出現(xiàn)在使用它們的組件中

• 時間旅行和更容易的調(diào)試

• 熱模塊更換

• 在不重新加載頁面的情況下修改您的商店

• 在開發(fā)時保持任何現(xiàn)有狀態(tài)

• 插件：使用插件擴(kuò)展 Pinia 功能

• 為 JS 用戶提供適當(dāng)?shù)?TypeScript 支持或自動完成功能

• 服務(wù)器端渲染支持

基本示例

這就是使用 pinia 在 API 方面的樣子（請務(wù)必查看入門以獲取完整說明）。您首先創(chuàng)建一個商店：

// 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()
  },
}

你甚至可以使用一個函數(shù)（類似于一個組件setup()）來為更高級的用例定義一個 Store：

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

  return { count, increment }
})

如果您仍然不熟悉setup()Composition API，請不要擔(dān)心，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']),
  },
}

您將在核心概念中找到有關(guān)每個地圖助手的更多信息。

為什么選擇Pinia

Pinia（發(fā)音為/pi?nj?/，如英語中的“peenya”）是最接近pi?a（西班牙語中的菠蘿）的詞，它是一個有效的包名稱。菠蘿實際上是一組單獨的花朵，它們結(jié)合在一起形成多個水果。與商店類似，每一家都是獨立誕生的，但最終都是相互聯(lián)系的。它也是一種美味的熱帶水果，原產(chǎn)于南美洲。

一個更現(xiàn)實的例子

這是一個更完整的 API 示例，您將在 Pinia中使用類型，即使在 JavaScript 中也是如此。對于某些人來說，這可能足以在不進(jìn)一步閱讀的情況下開始使用，但我們?nèi)匀唤ㄗh您查看文檔的其余部分，甚至跳過此示例并在閱讀完所有核心概念后返回。

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 核心團(tuán)隊的一員，并積極參與了 Router 和 Vuex 等 API 的設(shè)計。我個人對這個項目的意圖是重新設(shè)計使用全球商店的體驗，同時保持 Vue 的平易近人的理念。我保持 Pinia 的 API 與 Vuex 一樣接近，因為它不斷向前發(fā)展，以使人們更容易遷移到 Vuex，甚至在未來融合兩個項目（在 Vuex 下）。

RFC

雖然 Vuex 通過 RFC 從社區(qū)收集盡可能多的反饋，但 Pinia 沒有。我根據(jù)我開發(fā)應(yīng)用程序、閱讀其他人的代碼、為使用 Pinia 的客戶工作以及在 Discord 上回答問題的經(jīng)驗來測試想法。這使我能夠提供一種適用于各種情況和應(yīng)用程序大小的有效解決方案。我經(jīng)常發(fā)布并在保持其核心 API 不變的同時使庫不斷發(fā)展。

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

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

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

• 突變不再存在。他們經(jīng)常被認(rèn)為是非常冗長的。他們最初帶來了 devtools 集成，但這不再是問題。

• 無需創(chuàng)建自定義復(fù)雜包裝器來支持 TypeScript，所有內(nèi)容都是類型化的，并且 API 的設(shè)計方式盡可能利用 TS 類型推斷。

• 不再需要注入魔法字符串、導(dǎo)入函數(shù)、調(diào)用它們，享受自動完成功能！

• 無需動態(tài)添加商店，默認(rèn)情況下它們都是動態(tài)的，您甚至都不會注意到。請注意，您仍然可以隨時手動使用商店進(jìn)行注冊，但因為它是自動的，您無需擔(dān)心。

• 不再有模塊的嵌套結(jié)構(gòu)。您仍然可以通過在另一個商店中導(dǎo)入和使用商店來隱式嵌套商店，但 Pinia 通過設(shè)計提供平面結(jié)構(gòu)，同時仍然支持商店之間的交叉組合方式。你甚至可以有 store 的循環(huán)依賴。

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

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