Pinia 是 Vuex 的良好替代品嗎？

介紹

Pinia 是 Vue.js 的輕量級狀態管理庫，最近很受歡迎。它使用 Vue 3 中的新反應系統來構建一個直觀且完全類型化的狀態管理庫。

Pinia 的成功可以歸功於其管理存儲數據的獨特功能（可擴展性、存儲模塊組織、狀態變化分組、多存儲創建等）。

另一方面，Vuex 也是爲 Vue 框架建立的一個流行的狀態管理庫，它也是 Vue 核心團隊推薦的狀態管理庫。Vuex 高度關注應用程序的可擴展性、開發人員的工效和信心。它基於與 Redux 相同的流量架構。

在這篇文章中，我們將對 Pinia 和 Vuex 進行比較。我們將分析這兩個框架的設置、社區優勢和性能。我們還將看一下 Vuex 5 與 Pinea 2 相比的新變化。

設置

Pinia 設置

Pinia 很容易上手，因爲它只需要安裝和創建一個 store。

要安裝 Pinia，您可以在終端中運行以下命令：

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 的全局對象。

爲了創建一個 store，你用一個包含創建一個基本 store 所需的 states、actions 和 getters 的對象來調用 defineStore 方法。

// stores/todo.js
import { defineStore } from'pinia'

exportconst useTodoStore = defineStore({
  id: 'todo',
  state: () => ({ count: 0, title: "Cook noodles", done:false })
})

Vuex 設置

Vuex 也很容易設置，需要安裝和創建 store。

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

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

要創建 store，你可以使用包含創建基本 store 所需的 states、actions 和 getter 的對象調用 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 {
      // 訪問計算函數中的狀態
      count: computed(() => store.state.count),

      // 訪問計算函數中的getter
      double: computed(() => store.getters.double)
    }
  }
}

社區和生態系統的力量

在撰寫本文時，Pinia 的社區很小，這導致 Stack Overflow 上的貢獻很少，解決方案也很少。

由於 Pinia 於去年年初開始流行，並且目前取得了進展，因此其社區正在快速增長。希望很快會有更多的貢獻者和解決方案出現在 Pinia 上。

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

學習曲線和文檔

這兩個狀態管理庫都相當容易學習，因爲它們在 YouTube 和第三方博客上都有很好的文檔和學習資源。對於以前有使用 Redux、MobX、Recoil 等 Flux 架構庫經驗的開發人員來說，他們的學習曲線更容易。

這兩個庫的文檔都很棒，並且以對經驗豐富的開發人員和新開發人員都友好的方式編寫。

GitHub 評分

在撰寫本文時，Pania 有兩個主要版本：v1 和 v2，其中 v2 在 GitHub 上擁有超過 1.6k 星。鑑於它最初於 2019 年發佈並且相對較新，它無疑是 Vue.js 生態系統中增長最快的狀態管理庫之一。

同時，從 Vuex 創建之日到現在，Vuex 庫已經發布了五個穩定版本。儘管 v5 處於實驗階段，但 Vuex 的 v4 是迄今爲止最穩定的版本，在 GitHub 上擁有大約 26.3k 星。

性能

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

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

比較 Pinia 2 和 Vuex 4

Pinia 將這些與 Vuex 3 和 4 進行了比較：

突變不再存在。他們經常被認爲非常冗長。他們最初帶來了 devtools 集成，但這不再是問題。
無需創建自定義的複雜包裝器來支持 TypeScript，所有內容都是類型化的，並且 API 的設計方式儘可能地利用 TS 類型推斷。

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

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

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

將 Pinia 2（目前處於 alpha 階段）與 Vuex 進行比較，我們可以推斷出 Pinia 領先於 Vuex 4。

Vue.js 核心團隊爲 Vuex 5 制定了一個開放的 RFC，類似於 Pinia 使用的 RFC。目前，Vuex 通過 RFC 來儘可能多地收集社區的反饋。希望 Vuex 5 的穩定版本能夠超越 Pinea 2。

據同時也是 Vue.js 核心團隊成員並積極參與 Vuex 設計的 Pinia 的創建者（Eduardo San Martin Morote）所說，Pania 和 Vuex 的相似之處多於不同之處：

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

儘管 Pinia 足以取代 Vuex，但取代 Vuex 並不是它的目標，因此 Vuex 仍然是 Vue.js 應用程序的推薦狀態管理庫。

Vuex 和 Pinia 的優缺點

Vuex 的優點

支持調試功能，如時間旅行和編輯
適用於大型、高複雜度的 Vue.js 項目

Vuex 的缺點

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

Pinia 的優點

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

Pinia 的缺點

不支持時間旅行和編輯等調試功能

何時使用 Pinia，何時使用 Vuex

根據我的個人經驗，由於 Pinea 是輕量級的，體積很小，它適合於中小型應用。它也適用於低複雜度的 Vue.js 項目，因爲一些調試功能，如時間旅行和編輯仍然不被支持。

將 Vuex 用於中小型 Vue.js 項目是過度的，因爲它重量級的，對性能降低有很大影響。因此，Vuex 適用於大規模、高複雜度的 Vue.js 項目。

作者：Emmanuel John

https://blog.logrocket.com/pinia-vs-vuex

推薦關注「前端大全」，提升前端技能

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/CIyw_lPWWCZzkY2mZ8pdpQ

介紹

設置