Pinia 是 Vuex的良好替代品嗎？

2022-02-08 11:45:03

在這篇文章中，我們將對Pinia和Vuex進(jìn)行比較。我們將分析這兩個框架的設(shè)置、社區(qū)優(yōu)勢和性能。我們還將看一下Vuex 5與Pinea 2相比的新變化。

介紹

Pinia 是 Vue.js 的輕量級狀態(tài)管理庫，最近很受歡迎。它使用 Vue 3 中的新反應(yīng)系統(tǒng)來構(gòu)建一個直觀且完全類型化的狀態(tài)管理庫。

Pinia的成功可以歸功于其管理存儲數(shù)據(jù)的獨(dú)特功能（可擴(kuò)展性、存儲模塊組織、狀態(tài)變化分組、多存儲創(chuàng)建等）。

另一方面，Vuex也是為Vue框架建立的一個流行的狀態(tài)管理庫，它也是Vue核心團(tuán)隊推薦的狀態(tài)管理庫。Vuex高度關(guān)注應(yīng)用程序的可擴(kuò)展性、開發(fā)人員的工效和信心。它基于與Redux相同的流量架構(gòu)。

設(shè)置

Pinia 設(shè)置

Pinia 很容易上手，因為它只需要安裝和創(chuàng)建一個store。

要安裝 Pinia，您可以在終端中運(yùn)行以下命令：

yarn add pinia@next
# or with npm
npm install pinia@next

該版本與Vue 3兼容，如果你正在尋找與Vue 2.x兼容的版本，請查看v1分支。

Pinia是一個圍繞Vue 3 Composition API的封裝器。因此，你不必把它作為一個插件來初始化，除非你需要Vue devtools支持、SSR支持和webpack代碼分割的情況：

//app.js
import { createPinia } from'pinia'
app.use(createPinia())

在上面的片段中，你將Pinia添加到Vue.js項目中，這樣你就可以在你的代碼中使用Pinia的全局對象。

為了創(chuàng)建一個store，你用一個包含創(chuàng)建一個基本store所需的states、actions和getters的對象來調(diào)用 defineStore 方法。

// stores/todo.js
import { defineStore } from'pinia'
exportconst useTodoStore = defineStore({
  id: 'todo',
  state: () => ({ count: 0, title: "Cook noodles", done:false })
})

Vuex 設(shè)置

Vuex 也很容易設(shè)置，需要安裝和創(chuàng)建store。

要安裝Vuex，您可以在終端中執(zhí)行以下命令：

npm install vuex@next --save
# or with yarn
yarn add vuex@next --save

要創(chuàng)建store，你可以使用包含創(chuàng)建基本store所需的states、actions和 getter 的對象調(diào)用 createStore 方法：

//store.js
import {createStore} from'vuex'
const useStore = createStore({
  state: {
    todos: [
      { id: 1, title: '...', done: true }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

要訪問 Vuex 全局對象，需要在 Vue.js 項目根文件中添加 Vuex，如下所示：

//index.js
import { createApp } from'vue'
import App from'./App.vue'
import {useStore} from'./store'
createApp(App).use(store).mount('#app')

使用

Pinia使用

使用 Pinia，可以按如下方式訪問該store：

exportdefault defineComponent({
  setup() {
    const todo = useTodoStore()
    return {
      // 只允許訪問特定的state
      state: computed(() => todo.title),
    }
  },
})

請注意，在訪問其屬性時省略了 store 的 state 對象。

Vuex使用

使用Vuex，可以按如下方式訪問store：

import { computed } from'vue'
exportdefault {
  setup () {
    const store = useStore()
    return {
      // 訪問計算函數(shù)中的狀態(tài)
      count: computed(() => store.state.count),
      // 訪問計算函數(shù)中的getter
      double: computed(() => store.getters.double)
    }
  }
}

社區(qū)和生態(tài)系統(tǒng)的力量

在撰寫本文時，Pinia 的社區(qū)很小，這導(dǎo)致 Stack Overflow 上的貢獻(xiàn)很少，解決方案也很少。

由于 Pinia 于去年年初開始流行，并且目前取得了進(jìn)展，因此其社區(qū)正在快速增長。希望很快會有更多的貢獻(xiàn)者和解決方案出現(xiàn)在 Pinia 上。

Vuex 是 Vue.js 核心團(tuán)隊推薦的狀態(tài)管理庫，擁有龐大的社區(qū)，核心團(tuán)隊成員做出了重大貢獻(xiàn)。Stack Overflow 上很容易找到 Vuex 錯誤的解決方案。

學(xué)習(xí)曲線和文檔

這兩個狀態(tài)管理庫都相當(dāng)容易學(xué)習(xí)，因為它們在 YouTube 和第三方博客上都有很好的文檔和學(xué)習(xí)資源。對于以前有使用 Redux、MobX、Recoil 等 Flux 架構(gòu)庫經(jīng)驗的開發(fā)人員來說，他們的學(xué)習(xí)曲線更容易。

這兩個庫的文檔都很棒，并且以對經(jīng)驗豐富的開發(fā)人員和新開發(fā)人員都友好的方式編寫。

GitHub 評分

在撰寫本文時，Pania 有兩個主要版本：v1 和 v2，其中 v2 在 GitHub 上擁有超過 1.6k 星。鑒于它最初于 2019 年發(fā)布并且相對較新，它無疑是 Vue.js 生態(tài)系統(tǒng)中增長最快的狀態(tài)管理庫之一。

同時，從 Vuex 創(chuàng)建之日到現(xiàn)在，Vuex 庫已經(jīng)發(fā)布了五個穩(wěn)定版本。盡管 v5 處于實驗階段，但 Vuex 的 v4 是迄今為止最穩(wěn)定的版本，在 GitHub 上擁有大約 26.3k 星。

性能

Pinia和Vuex都非常快，在某些情況下，使用Pinia的web應(yīng)用程序會比使用Vuex更快。這種性能的提升可以歸因于Pinia的極輕的重量，Pinia體積約1KB。

盡管Pinia是在Vue devtools的支持下建立的，但由于Vue devtools沒有暴露出必要的API，所以一些功能如時間旅行和編輯仍然不被支持。當(dāng)開發(fā)速度和調(diào)試對你的項目來說更重要時，這是值得注意的。

比較 Pinia 2 和 Vuex 4

Pinia 將這些與 Vuex 3 和 4 進(jìn)行了比較：

突變不再存在。他們經(jīng)常被認(rèn)為非常冗長。他們最初帶來了 devtools 集成，但這不再是問題。
無需創(chuàng)建自定義的復(fù)雜包裝器來支持 TypeScript，所有內(nèi)容都是類型化的，并且 API 的設(shè)計方式盡可能地利用 TS 類型推斷。

這些是Pinia在其狀態(tài)管理庫和Vuex之間的比較中提出的額外見解：

Pinia 不支持嵌套存儲。相反，它允許你根據(jù)需要創(chuàng)建store。但是，store仍然可以通過在另一個store中導(dǎo)入和使用store來隱式嵌套
存儲器在被定義的時候會自動被命名。因此，不需要對模塊進(jìn)行明確的命名。
Pinia允許你建立多個store，讓你的捆綁器代碼自動分割它們
Pinia允許在其他getter中使用getter
Pinia允許使用 $patch 在devtools的時間軸上對修改進(jìn)行分組。

this.$patch((state) => {  state.posts.push(post)  state.user.postsCount++}).catch(error){  this.errors.push(error)}

將 Pinia 2（目前處于 alpha 階段）與 Vuex 進(jìn)行比較，我們可以推斷出 Pinia 領(lǐng)先于 Vuex 4。

Vue.js核心團(tuán)隊為Vuex 5制定了一個開放的RFC，類似于Pinia使用的RFC。目前，Vuex通過RFC來盡可能多地收集社區(qū)的反饋。希望Vuex 5的穩(wěn)定版本能夠超越Pinea 2。

據(jù)同時也是 Vue.js 核心團(tuán)隊成員并積極參與 Vuex 設(shè)計的 Pinia 的創(chuàng)建者（Eduardo San Martin Morote）所說，Pania 和 Vuex 的相似之處多于不同之處：

Pinia試圖盡可能地接近Vuex的理念。它的設(shè)計是為了測試Vuex的下一次迭代的建議，它是成功的，因為我們目前有一個開放的RFC，用于Vuex 5，其API與Pinea使用的非常相似。我對這個項目的個人意圖是重新設(shè)計使用全局Store的體驗，同時保持Vue的平易近人的理念。我保持Pinea的API與Vuex一樣接近，因為它不斷向前發(fā)展，使人們很容易遷移到Vuex，甚至在未來融合兩個項目（在Vuex下）。

盡管 Pinia 足以取代 Vuex，但取代 Vuex 并不是它的目標(biāo)，因此 Vuex 仍然是 Vue.js 應(yīng)用程序的推薦狀態(tài)管理庫。

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

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

支持調(diào)試功能，如時間旅行和編輯
適用于大型、高復(fù)雜度的Vue.js項目

Vuex的缺點(diǎn)

從 Vue 3 開始，getter 的結(jié)果不會像計算屬性那樣緩存
Vuex 4有一些與類型安全相關(guān)的問題

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

完整的 TypeScript 支持：與在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
極其輕巧（體積約 1KB）
store 的 action 被調(diào)度為常規(guī)的函數(shù)調(diào)用，而不是使用 dispatch 方法或 MapAction 輔助函數(shù)，這在 Vuex 中很常見
支持多個Store
支持 Vue devtools、SSR 和 webpack 代碼拆分

Pinia的缺點(diǎn)