技術文章 » 聊聊兩個Vue狀態管理庫Pinia和Vuex，該用哪個？

聊聊兩個Vue狀態管理庫Pinia和Vuex，該用哪個？

2023-02-15 22:00:20

本篇文章帶大家聊聊Vue狀態管理，介紹一下兩個Vue狀態管理庫：Pinia和Vuex，希望對大家有所幫助！

Vuex 和 Pinia 是用於管理 Vue.js 應用程式狀態的標準 Vue.js 庫。讓我們比較一下他們的程式碼、語言、功能和社群支援。

如果沒有合適的庫，開發人員管理應用程式的狀態可能會很困難。Vuex 和 Pinia 是標準的 Vue.js 庫，用於處理應用程式中的條件。這兩個庫都非常適合狀態管理，但是由於它們出色的特性和功能，選擇哪個庫用於你的專案需要時間並且令人沮喪。好吧，我們將在本文中看看為什麼一個是最好的。

在本文中，我們將通過實際程式碼範例檢視程式碼比較、它們的變體、功能，以及推薦使用哪一個來管理你的狀態應用程式，以便更好地理解。我們還將考慮每個產品的語言、功能和社群支援。

Pinia 和 Vuex 簡介

我將簡要總結 Vuex 和 Pinia。如果你想要更詳盡的解釋，我建議閱讀Vuex 檔案和Pinia 檔案。【相關推薦：、】

什麼是Pinia？

Pinia是一個新的狀態管理庫，可幫助你在 Vue.js 應用程式中跨元件管理和儲存響應資料和狀態。Pinia 由 Vue 核心團隊成員之一 Eduardo San Martin Morote 建立。

Pinia 使用新的反應系統來構建一個直觀且完全型別化的狀態管理系統。

庫中引入的新特性是促成 Pinia 推薦的因素之一。總體而言，Pinia 顯得輕巧、簡單且易於掌握。它擁有可以使 Vue 3 和 Vue 2 中的程式設計變得通用的一切。因此，這是試用 Pinia 的理想機會。

什麼是 Vuex？

Vuex是一種狀態管理模式和庫，構建為集中式儲存，可幫助你維護 Vue 應用程式中存在的所有元件的狀態。Vuex 遵循確保你的狀態突變為預測標準的規則。

使 Vuex 更強大的一個因素是元件從 Vuex store 中獲取它們的狀態，並且可以快速有效地響應 store 狀態的變化。

Vuex雖然是維護你store的狀態管理庫，但建議你熟悉或搭建過大型SPA。如果你沒有經驗，Vuex 可能會冗長且令人生畏。

如果你的應用程式很廣泛，你需要管理複雜的資料流，並且你有巢狀的元件，你可以使用 Vuex。檢視官方檔案以獲取有關何時使用 Vuex 的更多資訊。

Pinia 的特點

Pinia 和 Vuex 之間的區別之一是 Pinia 是「模組化設計」，換句話說，它被構建為擁有多個商店，而 Vuex 只有一個商店。在這些商店中，您可以擁有子模組。除此之外，Pinia 允許將這些模組中的每一個從他們的商店直接匯入到需要的元件中。

模組化設計

如果您是一名 Vue 開發人員並且曾使用 Vuex 管理應用程式的狀態，您會注意到 Vuex 只有一個商店。在該商店中，您可以在其中包含多個模組。使用 Pinia，您可以將這些模組中的每一個都儲存在一個地方，並在需要時將它們直接匯入到元件中。

此方法允許捆綁器自動對它們進行程式碼拆分，並提供更好的 TypeScript 推理。

完整的開發工具支援

Pinia 提供開發工具支援，以幫助您使用該庫構建和輕鬆偵錯。當我們安裝 Pinia 時，它會自動掛接到我們的 Vue.js 開發工具，並讓我們跟蹤對我們的商店所做的更改，這讓我們在 Vue.js 版本（Vue 2 和 Vue3）中獲得流暢的開發人員體驗。

Pinia 很直觀

Pinia 提供了一個簡單的 API，使您的商店的編寫變得簡單且井井有條，就像建立元件一樣。這意味著與 Vuex 解決方案相比，需要掌握的樣板檔案和概念更少。

Pinia 是可延伸的

Pinia 還提供了一個完整的外掛系統，具有交易和本地儲存同步等功能，適用於 Pinia 預設行為不足的情況。

TypeScript 支援

Pinia 提供比 Vuex 更好的 TypeScript 支援，具有 Javascript 自動完成功能，這使得開發過程變得簡單。

Pinia 輕量的

Pinia 的重量只有 1 KB，因此很容易融入您的專案。這可能會提高您的應用程式效能。

Vuex的特點

模組

當您的應用程式擴充套件時，遍歷變得很困難。但是，使用 Vuex 模組，您可以根據領域功能將您的商店拆分為多個檔案，並從該特定名稱空間中的模組存取狀態迴圈。

開發工具支援

Vue devtools 中的 Vuex 索引標籤允許我們檢視狀態並跟蹤我們的變化。這使我們能夠快速評估我們的程式如何執行和偵錯錯誤。

熱過載

Vuex支援熱過載功能，它使用 webpack 的熱模組替換 API，可以在您開發時快速過載您的 mutations、modules、action 和 getters。

TypeScript 支援

如果你想編寫一個 TypeScript 儲存定義，Vuex 可以提供它的型別並且更容易實現。它有一個預設的 TypeScript 設定，不需要額外的設定。

Pinia和Vuex的程式碼對比

Pinia 是一個輕量級庫，可幫助您管理整個應用程式的反應狀態。與 Vuex 相比，Pinia API 易於學習，使您的程式碼更易於閱讀。

讓我們看一下使用 Pinia 和 Vuex 管理我們的狀態的程式碼比較：

Vuex

在此範例中，我們將檢視一個簡單的 Vuex 儲存，它跟蹤待辦事項列表項的狀態：

import { createStore } from 'vuex'const TodoListstore = createStore({
  state() {
    return {
      todoListItems: []
    }
  },
  actions: {
    addNewList({ commit }, item) {
    {
      commit('createNewItem', item)
    }
  },
  mutations: {
    createNewItem(state, item) {
      state.todoListItems.push(item)
    }
  }})
登入後複製

如果你看上面的程式碼，你可以看到 Vuex 儲存中的三個動作：狀態、 動作和突變。狀態返回當前的todoListItems，動作提交一個突變來建立一個新專案，最後，突變建立新專案並將其新增到列表中。當你構建一個更大的應用程式時，你可能會意識到動作和突變相對相似，導致冗餘程式碼，因為每個狀態變化都需要一個樣板。

Pinia

使用 Pinia 簡單 API，您可以消除突變和冗餘程式碼。讓我們檢視一個程式碼範例，瞭解當您使用 Pinia 實現之前的程式碼時的樣子：

import { defineStore } from 'pinia'Export const useListStore = defineStore('list', {
  state() => ({
    return {
      todoListItems: []
    }
  }),
  actions: {
    addNewList() {  
      this.todoListItems.push(item)
    }
  }})
登入後複製

上面的範例是 Pinia API 在管理應用程式狀態時如何工作的簡單程式碼。使用 Pinia，我們刪除了突變並將其直接更新到我們的動作中。

注意：在上面的程式碼範例中，當我們將專案直接提交給我們的操作時，我們不需要跟蹤我們的專案。

Pinia 和 Vuex 的優缺點

Pinia 和 Vuex 是控制應用程式狀態的優秀工具，但其中一個必須具有另一個所沒有的某些功能。讓我們來看看它們是什麼。

Pinia 的優點

  • Pinia 允許你在不重新載入頁面的情況下修改你的商店。
  • 它在 JavaScript 中提供 TypeScript 支援和良好的自動完成功能。
  • Pinia 提供 devtool 支援，這有助於增強開發人員使用該工具的體驗。
  • Pinia 只有狀態、吸氣劑和動作。不需要突變。
  • 使用 Pinia，你可以將狀態儲存在一個地方，並在請求時將其傳遞給它們的元件。
  • 它是一個重量為 1 KB 的輕量級庫。
  • 它提供伺服器端渲染支援和自動型別模組，無需額外工作。
  • Pinia 相容 Vue 2 和 Vue 3。

Pinia 的缺點

  • 與 Vuex 相比，它沒有龐大的社群支援和解決方案。
  • Pinia 不支援偵錯功能，如時間旅行和編輯。

Vuex 的優點

  • Vuex 有 mutations、getters 和 actions。
  • 與 Pinia 相比，Vuex 的社群支援很大。
  • Vuex 支援偵錯功能，如時間旅行和編輯。

Vuex 的缺點

  • 它對 TypeScript 不友好。
  • 你只能將其用於大型 SPA。

我應該使用哪個：Pinia 還是 Vuex？

好吧，這就是它變得更具挑戰性的地方，因為仍然有一些專案需要使用 Vuex 來處理狀態應用程式，即使 Pinia 是新推薦的狀態管理庫。它有幾個 Vuex 沒有的有價值的功能。

Vuex 仍然是構建大型 SPA 的理想解決方案，因為對於構建中小型應用程式的人來說，它相當冗長。

Pinia 也一樣。儘管如此，如果你需要所有列出的功能，例如 devtool 支援、TypeScript 支援和狀態應用程式的輕鬆管理，那麼 Pinia 是最好的解決方案——它為你提供流暢的開發體驗。

如果你正在構建一個不太複雜的應用程式，無論是中等到廣泛的應用程式，你都可以使用 Pinia，因為它的重量約為 1 KB。

結論

由於功能多樣，在管理應用程式狀態時，在 Vuex 和 Pinia 之間進行選擇可能會造成混淆。不過，這兩個框架都非常適合管理狀態應用程式。本文簡要比較了它們的特性、功能和對程式碼的影響。讀完這篇文章後，也許你將能夠找到適合你的庫。

（學習視訊分享：、）

以上就是聊聊兩個Vue狀態管理庫Pinia和Vuex，該用哪個？的詳細內容，更多請關注TW511.COM其它相關文章！