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

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

Vuex 和 Pinia 是用于管理 Vue.js 應用程序狀態的標準 Vue.js 庫。讓我們比較一下他們的代碼、語言、功能和社區支持。

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

(相關資料圖)

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

Pinia 和 Vuex 簡介

我將簡要總結 Vuex 和 Pinia。如果你想要更詳盡的解釋，我建議閱讀Vuex 文檔和Pinia 文檔。【相關推薦：vuejs視頻教程、web前端開發】

什么是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 的缺點

Vuex 的優點

Vuex 的缺點

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

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

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

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

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

結論

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

（學習視頻分享：vuejs入門教程、編程基礎視頻）

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

關鍵詞： Pinia VueX