前言

Vuex 和 Pinia 是用于管理 Vue.js 應(yīng)用程序狀態(tài)的標(biāo)準(zhǔn) Vue.js 庫(kù)。讓我們比較一下他們的代碼、語(yǔ)言、功能和社區(qū)支持。

如果沒有合適的庫(kù)，開發(fā)人員管理應(yīng)用程序的狀態(tài)可能會(huì)很困難。Vuex 和 Pinia 是標(biāo)準(zhǔn)的 Vue.js 庫(kù)，用于處理應(yīng)用程序中的條件。這兩個(gè)庫(kù)都非常適合狀態(tài)管理，但是由于它們出色的特性和功能，選擇哪個(gè)庫(kù)用于你的項(xiàng)目需要時(shí)間并且令人沮喪。好吧，我們將在本文中看看為什么一個(gè)是最好的。

在本文中，我們將通過實(shí)際代碼示例查看代碼比較、它們的變體、功能，以及推薦使用哪一個(gè)來管理你的狀態(tài)應(yīng)用程序，以便更好地理解。我們還將考慮每個(gè)產(chǎn)品的語(yǔ)言、功能和社區(qū)支持。

Pinia 和 Vuex 簡(jiǎn)介

我將簡(jiǎn)要總結(jié) Vuex 和 Pinia。如果你想要更詳盡的解釋，我建議閱讀Vuex 文檔和Pinia 文檔。

什么是Pinia？

Pinia是一個(gè)新的狀態(tài)管理庫(kù)，可幫助你在 Vue.js 應(yīng)用程序中跨組件管理和存儲(chǔ)響應(yīng)數(shù)據(jù)和狀態(tài)。Pinia 由 Vue 核心團(tuán)隊(duì)成員之一 Eduardo San Martin Morote 創(chuàng)建。

Pinia 使用新的反應(yīng)系統(tǒng)來構(gòu)建一個(gè)直觀且完全類型化的狀態(tài)管理系統(tǒng)。

庫(kù)中引入的新特性是促成 Pinia 推薦的因素之一。總體而言，Pinia 顯得輕巧、簡(jiǎn)單且易于掌握。它擁有可以使 Vue 3 和 Vue 2 中的編程變得通用的一切。因此，這是試用 Pinia 的理想機(jī)會(huì)。

什么是 Vuex？

Vuex是一種狀態(tài)管理模式和庫(kù)，構(gòu)建為集中式存儲(chǔ)，可幫助你維護(hù) Vue 應(yīng)用程序中存在的所有組件的狀態(tài)。Vuex 遵循確保你的狀態(tài)突變?yōu)轭A(yù)測(cè)標(biāo)準(zhǔn)的規(guī)則。

使 Vuex 更強(qiáng)大的一個(gè)因素是組件從 Vuex store 中獲取它們的狀態(tài)，并且可以快速有效地響應(yīng) store 狀態(tài)的變化。

Vuex雖然是維護(hù)你store的狀態(tài)管理庫(kù)，但建議你熟悉或搭建過大型SPA。如果你沒有經(jīng)驗(yàn)，Vuex 可能會(huì)冗長(zhǎng)且令人生畏。

如果你的應(yīng)用程序很廣泛，你需要管理復(fù)雜的數(shù)據(jù)流，并且你有嵌套的組件，你可以使用 Vuex。查看官方文檔以獲取有關(guān)何時(shí)使用 Vuex 的更多信息。

Pinia 的特點(diǎn)

Pinia 和 Vuex 之間的區(qū)別之一是 Pinia 是“模塊化設(shè)計(jì)”，換句話說，它被構(gòu)建為擁有多個(gè)商店，而 Vuex 只有一個(gè)商店。在這些商店中，您可以擁有子模塊。除此之外，Pinia 允許將這些模塊中的每一個(gè)從他們的商店直接導(dǎo)入到需要的組件中。

模塊化設(shè)計(jì)

如果您是一名 Vue 開發(fā)人員并且曾使用 Vuex 管理應(yīng)用程序的狀態(tài)，您會(huì)注意到 Vuex 只有一個(gè)商店。在該商店中，您可以在其中包含多個(gè)模塊。使用 Pinia，您可以將這些模塊中的每一個(gè)都存儲(chǔ)在一個(gè)地方，并在需要時(shí)將它們直接導(dǎo)入到組件中。

此方法允許捆綁器自動(dòng)對(duì)它們進(jìn)行代碼拆分，并提供更好的 TypeScript 推理。

完整的開發(fā)工具支持

Pinia 提供開發(fā)工具支持，以幫助您使用該庫(kù)構(gòu)建和輕松調(diào)試。當(dāng)我們安裝 Pinia 時(shí)，它會(huì)自動(dòng)掛接到我們的 Vue.js 開發(fā)工具，并讓我們跟蹤對(duì)我們的商店所做的更改，這讓我們?cè)?Vue.js 版本（Vue 2 和 Vue3）中獲得流暢的開發(fā)人員體驗(yàn)。

Pinia 很直觀

Pinia 提供了一個(gè)簡(jiǎn)單的 API，使您的商店的編寫變得簡(jiǎn)單且井井有條，就像創(chuàng)建組件一樣。這意味著與 Vuex 解決方案相比，需要掌握的樣板文件和概念更少。

Pinia 是可擴(kuò)展的

Pinia 還提供了一個(gè)完整的插件系統(tǒng)，具有交易和本地存儲(chǔ)同步等功能，適用于 Pinia 默認(rèn)行為不足的情況。

TypeScript 支持

Pinia 提供比 Vuex 更好的 TypeScript 支持，具有 Javascript 自動(dòng)完成功能，這使得開發(fā)過程變得簡(jiǎn)單。

Pinia 輕量的

Pinia 的重量只有 1 KB，因此很容易融入您的項(xiàng)目。這可能會(huì)提高您的應(yīng)用程序性能。

Vuex的特點(diǎn)

模塊

當(dāng)您的應(yīng)用程序擴(kuò)展時(shí)，遍歷變得很困難。但是，使用 Vuex 模塊，您可以根據(jù)領(lǐng)域功能將您的商店拆分為多個(gè)文件，并從該特定命名空間中的模塊訪問狀態(tài)循環(huán)。

開發(fā)工具支持

Vue devtools 中的 Vuex 選項(xiàng)卡允許我們查看狀態(tài)并跟蹤我們的變化。這使我們能夠快速評(píng)估我們的程序如何執(zhí)行和調(diào)試錯(cuò)誤。

熱重載

Vuex支持熱重載功能，它使用 webpack 的熱模塊替換 API，可以在您開發(fā)時(shí)快速重載您的 mutations、modules、action 和 getters。

TypeScript 支持

如果你想編寫一個(gè) TypeScript 存儲(chǔ)定義，Vuex 可以提供它的類型并且更容易實(shí)現(xiàn)。它有一個(gè)默認(rèn)的 TypeScript 配置，不需要額外的設(shè)置。

Pinia和Vuex的代碼對(duì)比

Pinia 是一個(gè)輕量級(jí)庫(kù)，可幫助您管理整個(gè)應(yīng)用程序的反應(yīng)狀態(tài)。與 Vuex 相比，Pinia API 易于學(xué)習(xí)，使您的代碼更易于閱讀。

讓我們看一下使用 Pinia 和 Vuex 管理我們的狀態(tài)的代碼比較：

Vuex

在此示例中，我們將查看一個(gè)簡(jiǎn)單的 Vuex 存儲(chǔ)，它跟蹤待辦事項(xiàng)列表項(xiàng)的狀態(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)
    }
  }
})

如果你看上面的代碼，你可以看到 Vuex 存儲(chǔ)中的三個(gè)動(dòng)作：狀態(tài)、 動(dòng)作和突變。狀態(tài)返回當(dāng)前的todoListItems，動(dòng)作提交一個(gè)突變來創(chuàng)建一個(gè)新項(xiàng)目，最后，突變創(chuàng)建新項(xiàng)目并將其添加到列表中。當(dāng)你構(gòu)建一個(gè)更大的應(yīng)用程序時(shí)，你可能會(huì)意識(shí)到動(dòng)作和突變相對(duì)相似，導(dǎo)致冗余代碼，因?yàn)槊總€(gè)狀態(tài)變化都需要一個(gè)樣板。

Pinia

使用 Pinia 簡(jiǎn)單 API，您可以消除突變和冗余代碼。讓我們查看一個(gè)代碼示例，了解當(dāng)您使用 Pinia 實(shí)現(xiàn)之前的代碼時(shí)的樣子：

import { defineStore } from 'pinia'

Export const useListStore = defineStore('list', {
  state() => ({
    return {
      todoListItems: []
    }
  }),
  actions: {
    addNewList() {  
      this.todoListItems.push(item)
    }
  }})

上面的示例是 Pinia API 在管理應(yīng)用程序狀態(tài)時(shí)如何工作的簡(jiǎn)單代碼。使用 Pinia，我們刪除了突變并將其直接更新到我們的動(dòng)作中。

注意：在上面的代碼示例中，當(dāng)我們將項(xiàng)目直接提交給我們的操作時(shí)，我們不需要跟蹤我們的項(xiàng)目。

Pinia 和 Vuex 的優(yōu)缺點(diǎn)

Pinia 和 Vuex 是控制應(yīng)用程序狀態(tài)的優(yōu)秀工具，但其中一個(gè)必須具有另一個(gè)所沒有的某些功能。讓我們來看看它們是什么。

Pinia 的優(yōu)點(diǎn)

• Pinia 允許你在不重新加載頁(yè)面的情況下修改你的商店。
• 它在 JavaScript 中提供 TypeScript 支持和良好的自動(dòng)完成功能。
• Pinia 提供 devtool 支持，這有助于增強(qiáng)開發(fā)人員使用該工具的體驗(yàn)。
• Pinia 只有狀態(tài)、吸氣劑和動(dòng)作。不需要突變。
• 使用 Pinia，你可以將狀態(tài)存儲(chǔ)在一個(gè)地方，并在請(qǐng)求時(shí)將其傳遞給它們的組件。
• 它是一個(gè)重量為 1 KB 的輕量級(jí)庫(kù)。
• 它提供服務(wù)器端渲染支持和自動(dòng)類型模塊，無需額外工作。
• Pinia 兼容 Vue 2 和 Vue 3。

Pinia 的缺點(diǎn)

• 與 Vuex 相比，它沒有龐大的社區(qū)支持和解決方案。
• Pinia 不支持調(diào)試功能，如時(shí)間旅行和編輯。

Vuex 的優(yōu)點(diǎn)

• Vuex 有 mutations、getters 和 actions。
• 與 Pinia 相比，Vuex 的社區(qū)支持很大。
• Vuex 支持調(diào)試功能，如時(shí)間旅行和編輯。

Vuex 的缺點(diǎn)

• 它對(duì) TypeScript 不友好。
• 你只能將其用于大型 SPA。

我應(yīng)該使用哪個(gè)：Pinia 還是 Vuex？

好吧，這就是它變得更具挑戰(zhàn)性的地方，因?yàn)槿匀挥幸恍╉?xiàng)目需要使用 Vuex 來處理狀態(tài)應(yīng)用程序，即使 Pinia 是新推薦的狀態(tài)管理庫(kù)。它有幾個(gè) Vuex 沒有的有價(jià)值的功能。

Vuex 仍然是構(gòu)建大型 SPA 的理想解決方案，因?yàn)閷?duì)于構(gòu)建中小型應(yīng)用程序的人來說，它相當(dāng)冗長(zhǎng)。

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

如果你正在構(gòu)建一個(gè)不太復(fù)雜的應(yīng)用程序，無論是中等到廣泛的應(yīng)用程序，你都可以使用 Pinia，因?yàn)樗闹亓考s為 1 KB。

結(jié)論

由于功能多樣，在管理應(yīng)用程序狀態(tài)時(shí)，在 Vuex 和 Pinia 之間進(jìn)行選擇可能會(huì)造成混淆。不過，這兩個(gè)框架都非常適合管理狀態(tài)應(yīng)用程序。本文簡(jiǎn)要比較了它們的特性、功能和對(duì)代碼的影響。讀完這篇文章后，也許你將能夠找到適合你的庫(kù)。

到此這篇關(guān)于Vue.js狀態(tài)管理之Pinia與Vuex的文章就介紹到這了,更多相關(guān)Vue.js狀態(tài)管理Pinia與Vuex內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！