建站
咨詢
售后
建站咨詢
新聞中心
介紹
Pinia 是 Vue.js 的輕量級(jí)狀態(tài)管理庫(kù)，最近很受歡迎。它使用 Vue 3 中的新反應(yīng)系統(tǒng)來(lái)構(gòu)建一個(gè)直觀且完全類型化的狀態(tài)管理庫(kù)。
“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來(lái)堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺(jué)傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！
Pinia的成功可以歸功于其管理存儲(chǔ)數(shù)據(jù)的獨(dú)特功能(可擴(kuò)展性、存儲(chǔ)模塊組織、狀態(tài)變化分組、多存儲(chǔ)創(chuàng)建等)。
另一方面，Vuex也是為Vue框架建立的一個(gè)流行的狀態(tài)管理庫(kù)，它也是Vue核心團(tuán)隊(duì)推薦的狀態(tài)管理庫(kù)。Vuex高度關(guān)注應(yīng)用程序的可擴(kuò)展性、開(kāi)發(fā)人員的工效和信心。它基于與Redux相同的流量架構(gòu)。
在這篇文章中，我們將對(duì)Pinia和Vuex進(jìn)行比較。我們將分析這兩個(gè)框架的設(shè)置、社區(qū)優(yōu)勢(shì)和性能。我們還將看一下Vuex 5與Pinea 2相比的新變化。
設(shè)置
Pinia 設(shè)置
Pinia 很容易上手，因?yàn)樗恍枰惭b和創(chuàng)建一個(gè)store。
要安裝 Pinia，您可以在終端中運(yùn)行以下命令：
- yarn add pinia@next
- # or with npm
- npm install pinia@next
該版本與Vue 3兼容，如果你正在尋找與Vue 2.x兼容的版本，請(qǐng)查看v1分支。
Pinia是一個(gè)圍繞Vue 3 Composition API的封裝器。因此，你不必把它作為一個(gè)插件來(lái)初始化，除非你需要Vue devtools支持、SSR支持和webpack代碼分割的情況：
- //app.js
- import { createPinia } from 'pinia'
- app.use(createPinia())
在上面的片段中，你將Pinia添加到Vue.js項(xiàng)目中，這樣你就可以在你的代碼中使用Pinia的全局對(duì)象。
為了創(chuàng)建一個(gè)store，你用一個(gè)包含創(chuàng)建一個(gè)基本store所需的states、actions和getters的對(duì)象來(lái)調(diào)用 defineStore 方法。
- // stores/todo.js
- import { defineStore } from 'pinia'
- export const 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
要?jiǎng)?chuàng)建store，你可以使用包含創(chuàng)建基本store所需的states、actions和 getter 的對(duì)象調(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)
- }
- }
- })
要訪問(wèn) Vuex 全局對(duì)象，需要在 Vue.js 項(xiàng)目根文件中添加 Vuex，如下所示：
- //index.js
- import { createApp } from 'vue'
- import App from './App.vue'
- import {useStore} from './store'
- createApp(App).use(store).mount('#app')
使用
Pinia使用
使用 Pinia，可以按如下方式訪問(wèn)該store：
- export default defineComponent({
- setup() {
- const todo = useTodoStore()
- return {
- // 只允許訪問(wèn)特定的state
- state: computed(() => todo.title),
- }
- },
- })
請(qǐng)注意，在訪問(wèn)其屬性時(shí)省略了 store 的 state 對(duì)象。
Vuex使用
使用Vuex，可以按如下方式訪問(wèn)store：
- import { computed } from 'vue'
- export default {
- setup () {
- const store = useStore()
- return {
- // 訪問(wèn)計(jì)算函數(shù)中的狀態(tài)
- count: computed(() => store.state.count),
- // 訪問(wèn)計(jì)算函數(shù)中的getter
- double: computed(() => store.getters.double)
- }
- }
- }
社區(qū)和生態(tài)系統(tǒng)的力量
在撰寫(xiě)本文時(shí)，Pinia 的社區(qū)很小，這導(dǎo)致 Stack Overflow 上的貢獻(xiàn)很少，解決方案也很少。
由于 Pinia 于去年年初開(kāi)始流行，并且目前取得了進(jìn)展，因此其社區(qū)正在快速增長(zhǎng)。希望很快會(huì)有更多的貢獻(xiàn)者和解決方案出現(xiàn)在 Pinia 上。
Vuex 是 Vue.js 核心團(tuán)隊(duì)推薦的狀態(tài)管理庫(kù)，擁有龐大的社區(qū)，核心團(tuán)隊(duì)成員做出了重大貢獻(xiàn)。Stack Overflow 上很容易找到 Vuex 錯(cuò)誤的解決方案。
學(xué)習(xí)曲線和文檔
這兩個(gè)狀態(tài)管理庫(kù)都相當(dāng)容易學(xué)習(xí)，因?yàn)樗鼈冊(cè)?YouTube 和第三方博客上都有很好的文檔和學(xué)習(xí)資源。對(duì)于以前有使用 Redux、MobX、Recoil 等 Flux 架構(gòu)庫(kù)經(jīng)驗(yàn)的開(kāi)發(fā)人員來(lái)說(shuō)，他們的學(xué)習(xí)曲線更容易。
這兩個(gè)庫(kù)的文檔都很棒，并且以對(duì)經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員和新開(kāi)發(fā)人員都友好的方式編寫(xiě)。
GitHub 評(píng)分
在撰寫(xiě)本文時(shí)，Pania 有兩個(gè)主要版本：v1 和 v2，其中 v2 在 GitHub 上擁有超過(guò) 1.6k 星。鑒于它最初于 2019 年發(fā)布并且相對(duì)較新，它無(wú)疑是 Vue.js 生態(tài)系統(tǒng)中增長(zhǎng)最快的狀態(tài)管理庫(kù)之一。
同時(shí)，從 Vuex 創(chuàng)建之日到現(xiàn)在，Vuex 庫(kù)已經(jīng)發(fā)布了五個(gè)穩(wěn)定版本。盡管 v5 處于實(shí)驗(yàn)階段，但 Vuex 的 v4 是迄今為止最穩(wěn)定的版本，在 GitHub 上擁有大約 26.3k 星。
性能
Pinia和Vuex都非?？?，在某些情況下，使用Pinia的web應(yīng)用程序會(huì)比使用Vuex更快。這種性能的提升可以歸因于Pinia的極輕的重量，Pinia體積約1KB。
盡管Pinia是在Vue devtools的支持下建立的，但由于Vue devtools沒(méi)有暴露出必要的API，所以一些功能如時(shí)間旅行和編輯仍然不被支持。當(dāng)開(kāi)發(fā)速度和調(diào)試對(duì)你的項(xiàng)目來(lái)說(shuō)更重要時(shí)，這是值得注意的。
比較 Pinia 2 和 Vuex 4
Pinia 將這些與 Vuex 3 和 4 進(jìn)行了比較：
- 突變不再存在。他們經(jīng)常被認(rèn)為非常冗長(zhǎng)。他們最初帶來(lái)了 devtools 集成，但這不再是問(wèn)題。
- 無(wú)需創(chuàng)建自定義的復(fù)雜包裝器來(lái)支持 TypeScript，所有內(nèi)容都是類型化的，并且 API 的設(shè)計(jì)方式盡可能地利用 TS 類型推斷。
這些是Pinia在其狀態(tài)管理庫(kù)和Vuex之間的比較中提出的額外見(jiàn)解：
- Pinia 不支持嵌套存儲(chǔ)。相反，它允許你根據(jù)需要?jiǎng)?chuàng)建store。但是，store仍然可以通過(guò)在另一個(gè)store中導(dǎo)入和使用store來(lái)隱式嵌套
- 存儲(chǔ)器在被定義的時(shí)候會(huì)自動(dòng)被命名。因此，不需要對(duì)模塊進(jìn)行明確的命名。
- Pinia允許你建立多個(gè)store，讓你的捆綁器代碼自動(dòng)分割它們
- Pinia允許在其他getter中使用getter
- Pinia允許使用 $patch 在devtools的時(shí)間軸上對(duì)修改進(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)隊(duì)為Vuex 5制定了一個(gè)開(kāi)放的RFC，類似于Pinia使用的RFC。目前，Vuex通過(guò)RFC來(lái)盡可能多地收集社區(qū)的反饋。希望Vuex 5的穩(wěn)定版本能夠超越Pinea 2。
據(jù)同時(shí)也是 Vue.js 核心團(tuán)隊(duì)成員并積極參與 Vuex 設(shè)計(jì)的 Pinia 的創(chuàng)建者(Eduardo San Martin Morote)所說(shuō)，Pania 和 Vuex 的相似之處多于不同之處：
Pinia試圖盡可能地接近Vuex的理念。它的設(shè)計(jì)是為了測(cè)試Vuex的下一次迭代的建議，它是成功的，因?yàn)槲覀兡壳坝幸粋€(gè)開(kāi)放的RFC，用于Vuex 5，其API與Pinea使用的非常相似。我對(duì)這個(gè)項(xiàng)目的個(gè)人意圖是重新設(shè)計(jì)使用全局Store的體驗(yàn)，同時(shí)保持Vue的平易近人的理念。我保持Pinea的API與Vuex一樣接近，因?yàn)樗粩嘞蚯鞍l(fā)展，使人們很容易遷移到Vuex，甚至在未來(lái)融合兩個(gè)項(xiàng)目(在Vuex下)。
盡管 Pinia 足以取代 Vuex，但取代 Vuex 并不是它的目標(biāo)，因此 Vuex 仍然是 Vue.js 應(yīng)用程序的推薦狀態(tài)管理庫(kù)。
Vuex 和 Pinia 的優(yōu)缺點(diǎn)
Vuex的優(yōu)點(diǎn)
- 支持調(diào)試功能，如時(shí)間旅行和編輯
- 適用于大型、高復(fù)雜度的Vue.js項(xiàng)目
Vuex的缺點(diǎn)
- 從 Vue 3 開(kāi)始，getter 的結(jié)果不會(huì)像計(jì)算屬性那樣緩存
- Vuex 4有一些與類型安全相關(guān)的問(wèn)題
Pinia的優(yōu)點(diǎn)
- 完整的 TypeScript 支持：與在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
- 極其輕巧(體積約 1KB)
- store 的 action 被調(diào)度為常規(guī)的函數(shù)調(diào)用，而不是使用 dispatch 方法或 MapAction 輔助函數(shù)，這在 Vuex 中很常見(jiàn)
- 支持多個(gè)Store
- 支持 Vue devtools、SSR 和 webpack 代碼拆分
Pinia的缺點(diǎn)
- 不支持時(shí)間旅行和編輯等調(diào)試功能
何時(shí)使用Pinia，何時(shí)使用Vuex
根據(jù)我的個(gè)人經(jīng)驗(yàn)，由于Pinea是輕量級(jí)的，體積很小，它適合于中小型應(yīng)用。它也適用于低復(fù)雜度的Vue.js項(xiàng)目，因?yàn)橐恍┱{(diào)試功能，如時(shí)間旅行和編輯仍然不被支持。
將 Vuex 用于中小型 Vue.js 項(xiàng)目是過(guò)度的，因?yàn)樗亓考?jí)的，對(duì)性能降低有很大影響。因此，Vuex 適用于大規(guī)模、高復(fù)雜度的 Vue.js 項(xiàng)目。
原文：https://blog.logrocket.com/pinia-vs-vuex/
作者：Emmanuel John
標(biāo)題名稱：Pinia與Vuex的對(duì)比：Pinia是Vuex的良好替代品嗎？
網(wǎng)站路徑：http://www.5511xx.com/article/djpcieg.html
