Vuex 和 Pinia 是用于管理 Vue.js 應(yīng)用程序狀態(tài)的標準 Vue.js 庫。讓我們比較一下他們的代碼、語言、功能和社區(qū)支持。
如果沒有合適的庫，開發(fā)人員管理應(yīng)用程序的狀態(tài)可能會很困難。Vuex 和 Pinia 是標準的 Vue.js 庫，用于處理應(yīng)用程序中的條件。這兩個庫都非常適合狀態(tài)管理，但是由于它們出色的特性和功能，選擇哪個庫用于你的項目需要時間并且令人沮喪。好吧，我們將在本文中看看為什么一個是最好的。
在本文中，我們將通過實際代碼示例查看代碼比較、它們的變體、功能，以及推薦使用哪一個來管理你的狀態(tài)應(yīng)用程序，以便更好地理解。我們還將考慮每個產(chǎn)品的語言、功能和社區(qū)支持。
Pinia 和 Vuex 簡介
我將簡要總結(jié) Vuex 和 Pinia。如果你想要更詳盡的解釋，我建議閱讀Vuex 文檔和Pinia 文檔。
什么是Pinia？
Pinia是一個新的狀態(tài)管理庫，可幫助你在 Vue.js 應(yīng)用程序中跨組件管理和存儲響應(yīng)數(shù)據(jù)和狀態(tài)。Pinia 由 Vue 核心團隊成員之一 Eduardo San Martin Morote 創(chuàng)建。
Pinia 使用新的反應(yīng)系統(tǒng)來構(gòu)建一個直觀且完全類型化的狀態(tài)管理系統(tǒng)。
庫中引入的新特性是促成 Pinia 推薦的因素之一?？傮w而言，Pinia 顯得輕巧、簡單且易于掌握。它擁有可以使 Vue 3 和 Vue 2 中的編程變得通用的一切。因此，這是試用 Pinia 的理想機會。
什么是 Vuex？
Vuex是一種狀態(tài)管理模式和庫，構(gòu)建為集中式存儲，可幫助你維護 Vue 應(yīng)用程序中存在的所有組件的狀態(tài)。Vuex 遵循確保你的狀態(tài)突變?yōu)轭A(yù)測標準的規(guī)則。
使 Vuex 更強大的一個因素是組件從 Vuex store 中獲取它們的狀態(tài)，并且可以快速有效地響應(yīng) store 狀態(tài)的變化。
Vuex雖然是維護你store的狀態(tài)管理庫，但建議你熟悉或搭建過大型SPA。如果你沒有經(jīng)驗，Vuex 可能會冗長且令人生畏。
如果你的應(yīng)用程序很廣泛，你需要管理復(fù)雜的數(shù)據(jù)流，并且你有嵌套的組件，你可以使用 Vuex。查看官方文檔以獲取有關(guān)何時使用 Vuex 的更多信息。
Pinia 的特點
Pinia 和 Vuex 之間的區(qū)別之一是 Pinia 是“模塊化設(shè)計”，換句話說，它被構(gòu)建為擁有多個商店，而 Vuex 只有一個商店。在這些商店中，您可以擁有子模塊。除此之外，Pinia 允許將這些模塊中的每一個從他們的商店直接導(dǎo)入到需要的組件中。
模塊化設(shè)計
如果您是一名 Vue 開發(fā)人員并且曾使用 Vuex 管理應(yīng)用程序的狀態(tài)，您會注意到 Vuex 只有一個商店。在該商店中，您可以在其中包含多個模塊。使用 Pinia，您可以將這些模塊中的每一個都存儲在一個地方，并在需要時將它們直接導(dǎo)入到組件中。
此方法允許捆綁器自動對它們進行代碼拆分，并提供更好的 TypeScript 推理。
完整的開發(fā)工具支持
Pinia 提供開發(fā)工具支持，以幫助您使用該庫構(gòu)建和輕松調(diào)試。當我們安裝 Pinia 時，它會自動掛接到我們的 Vue.js 開發(fā)工具，并讓我們跟蹤對我們的商店所做的更改，這讓我們在 Vue.js 版本（Vue 2 和 Vue3）中獲得流暢的開發(fā)人員體驗。
Pinia 很直觀
Pinia 提供了一個簡單的 API，使您的商店的編寫變得簡單且井井有條，就像創(chuàng)建組件一樣。這意味著與 Vuex 解決方案相比，需要掌握的樣板文件和概念更少。
Pinia 是可擴展的
Pinia 還提供了一個完整的插件系統(tǒng)，具有交易和本地存儲同步等功能，適用于 Pinia 默認行為不足的情況。
TypeScript 支持
Pinia 提供比 Vuex 更好的 TypeScript 支持，具有 Javascript 自動完成功能，這使得開發(fā)過程變得簡單。
Pinia 輕量的
Pinia 的重量只有 1 KB，因此很容易融入您的項目。這可能會提高您的應(yīng)用程序性能。
Vuex的特點
模塊
當您的應(yīng)用程序擴展時，遍歷變得很困難。但是，使用 Vuex 模塊，您可以根據(jù)領(lǐng)域功能將您的商店拆分為多個文件，并從該特定命名空間中的模塊訪問狀態(tài)循環(huán)。
開發(fā)工具支持
Vue devtools 中的 Vuex 選項卡允許我們查看狀態(tài)并跟蹤我們的變化。這使我們能夠快速評估我們的程序如何執(zhí)行和調(diào)試錯誤。
熱重載
Vuex支持熱重載功能，它使用 webpack 的熱模塊替換 API，可以在您開發(fā)時快速重載您的 mutations、modules、action 和 getters。
TypeScript 支持
如果你想編寫一個 TypeScript 存儲定義，Vuex 可以提供它的類型并且更容易實現(xiàn)。它有一個默認的 TypeScript 配置，不需要額外的設(shè)置。
Pinia和Vuex的代碼對比
Pinia 是一個輕量級庫，可幫助您管理整個應(yīng)用程序的反應(yīng)狀態(tài)。與 Vuex 相比，Pinia API 易于學(xué)習(xí)，使您的代碼更易于閱讀。
讓我們看一下使用 Pinia 和 Vuex 管理我們的狀態(tài)的代碼比較：
Vuex
在此示例中，我們將查看一個簡單的 Vuex 存儲，它跟蹤待辦事項列表項的狀態(tài)：
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) } } })
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
如果你看上面的代碼，你可以看到 Vuex 存儲中的三個動作：狀態(tài)、 動作和突變。狀態(tài)返回當前的todoListItems，動作提交一個突變來創(chuàng)建一個新項目，最后，突變創(chuàng)建新項目并將其添加到列表中。當你構(gòu)建一個更大的應(yīng)用程序時，你可能會意識到動作和突變相對相似，導(dǎo)致冗余代碼，因為每個狀態(tài)變化都需要一個樣板。
Pinia
使用 Pinia 簡單 API，您可以消除突變和冗余代碼。讓我們查看一個代碼示例，了解當您使用 Pinia 實現(xiàn)之前的代碼時的樣子：
import { defineStore } from 'pinia' Export const useListStore = defineStore('list', { state() => ({ return { todoListItems: [] } }), actions: { addNewList() { this.todoListItems.push(item) } }})
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
上面的示例是 Pinia API 在管理應(yīng)用程序狀態(tài)時如何工作的簡單代碼。使用 Pinia，我們刪除了突變并將其直接更新到我們的動作中。
注意：在上面的代碼示例中，當我們將項目直接提交給我們的操作時，我們不需要跟蹤我們的項目。
Pinia 和 Vuex 的優(yōu)缺點
Pinia 和 Vuex 是控制應(yīng)用程序狀態(tài)的優(yōu)秀工具，但其中一個必須具有另一個所沒有的某些功能。讓我們來看看它們是什么。
Pinia 的優(yōu)點
-
Pinia 允許你在不重新加載頁面的情況下修改你的商店。
-
它在 JavaScript 中提供 TypeScript 支持和良好的自動完成功能。
-
Pinia 提供 devtool 支持，這有助于增強開發(fā)人員使用該工具的體驗。
-
Pinia 只有狀態(tài)、吸氣劑和動作。不需要突變。
-
使用 Pinia，你可以將狀態(tài)存儲在一個地方，并在請求時將其傳遞給它們的組件。
-
它是一個重量為 1 KB 的輕量級庫。
-
它提供服務(wù)器端渲染支持和自動類型模塊，無需額外工作。
-
Pinia 兼容 Vue 2 和 Vue 3。
Pinia 的缺點
-
與 Vuex 相比，它沒有龐大的社區(qū)支持和解決方案。
-
Pinia 不支持調(diào)試功能，如時間旅行和編輯。
Vuex 的優(yōu)點
-
Vuex 有 mutations、getters 和 actions。
-
與 Pinia 相比，Vuex 的社區(qū)支持很大。
-
Vuex 支持調(diào)試功能，如時間旅行和編輯。
Vuex 的缺點
-
它對 TypeScript 不友好。
-
你只能將其用于大型 SPA。
我應(yīng)該使用哪個：Pinia 還是 Vuex？
好吧，這就是它變得更具挑戰(zhàn)性的地方，因為仍然有一些項目需要使用 Vuex 來處理狀態(tài)應(yīng)用程序，即使 Pinia 是新推薦的狀態(tài)管理庫。它有幾個 Vuex 沒有的有價值的功能。
Vuex 仍然是構(gòu)建大型 SPA 的理想解決方案，因為對于構(gòu)建中小型應(yīng)用程序的人來說，它相當冗長。
Pinia 也一樣。盡管如此，如果你需要所有列出的功能，例如 devtool 支持、TypeScript 支持和狀態(tài)應(yīng)用程序的輕松管理，那么 Pinia 是最好的解決方案——它為你提供流暢的開發(fā)體驗。
如果你正在構(gòu)建一個不太復(fù)雜的應(yīng)用程序，無論是中等到廣泛的應(yīng)用程序，你都可以使用 Pinia，因為它的重量約為 1 KB。
結(jié)論
由于功能多樣，在管理應(yīng)用程序狀態(tài)時，在 Vuex 和 Pinia 之間進行選擇可能會造成混淆。不過，這兩個框架都非常適合管理狀態(tài)應(yīng)用程序。本文簡要比較了它們的特性、功能和對代碼的影響。讀完這篇文章后，也許你將能夠找到適合你的庫。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
