Pinia與Vuex的對比：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'
- export const 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：
- export default defineComponent({
- setup() {
- const todo = useTodoStore()
- return {
- // 只允許訪問特定的state
- state: computed(() => todo.title),
- }
- },
- })
請注意，在訪問其屬性時省略了 store 的 state 對象。
Vuex使用
使用Vuex，可以按如下方式訪問store：
- import { computed } from 'vue'
- export default {
- 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 項目。
原文：https://blog.logrocket.com/pinia-vs-vuex/
作者：Emmanuel John
