pinia 相比 vuex 的優勢

1.Pinia 是什麼？

你可能聽說過pinia是vue官方推薦的狀態管理庫，尤大甚至稱pinia是事實上的vuex5，但是你是否知道相比vuex爲什麼要使用pinia以及如何使用pinia，本文將解釋爲什麼pinia在狀態管理方面更勝一籌。

2.pinia的作者是誰

pinia的作者是 Eduardo San Martin Morote，同時也是Vue Router的創造者，是vue核心團隊成員之一。

3.Pinia是否能在vue2和vue3下運行

是的，pinia和vue的兩個主要版本都兼容。

4.pinia和vuex之間的比較

4.1 pinia的api更加簡單

Pinia的 API 比Vuex更簡單、更直觀。因爲vuex中每個狀態更改需要編寫的大量代碼在pinia中已經刪除了，這使得即使是初級開發人員也不會覺得狀態管理難。

一個pinia的例子

運行以下代碼在我們的 vue app 中安裝pinia

yarn add pinia 
# or with npm 
npm install pinia

更改main.js來使用pinia

import { createApp } from "vue"; 

import { createPinia } from "pinia"; 

import App from "./App.vue"; 

const app = createApp(App); 

app.use(createPinia()); 

app.mount("#app");

在 src 目錄下創建 stores 文件夾，然後再創建一個 counter.js 文件，並粘貼以下代碼：
src/stores/counter.js

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {

  state: () => {
    return { count: 0 };
  },
  
  actions: {
    increment(value = 1) {
      this.count += value;
    },
  },
  
  getters: {
    doubleCount: (state) => {
      return state.count * 2;
    },
    doublePlusOne() {
      return this.doubleCount + 1
    },
  },
});

關於以上代碼，我們需要看到的是：

4.2  Pinia採用模塊化設計

vuex只有一個store, 在其中可以包含多個模塊，但是在pinia中，我們可以直接創建多個store, 這些store可以直接按需導入到組件中，這有利於更好的代碼分隔，並更有利於TypeScript的類型推斷。採用多個store替代一個store也簡化了開發。在前面例子的基礎上，單文件組件中使用pinia，代碼如下所示：

<script setup> 

import { useCounterStore } from "./stores/counter"; 
const store = useCounterStore(); 

</script> 


<template> 

<h1>Count is {{ store.count }}</h1>

<h2>Double is {{ store.doubleCount }}</h2> 

<button @click="store.increment()">Increment</button>

</template>

4.3 Devtools也附帶pinia

如果你熟悉vuex，應該使用過DevTools的vuex選項卡，可能知道區分 actions 和 mutations 並不是爲了解決競態問題，而是爲了能用 devtools 追蹤狀態變化。這可能會讓你發問，pinia 有devtools嗎？幸運的是，答案是肯定的。Pinia devtools和我們熟知的Vuex devtools 一樣好用，並且一旦我們在程序中使用pinia, 在開發工具中就能看到它。

4.4 pinia天然支持typescript

對於vue開發人員來說，讓vuex支持類型是很難受的體驗。Pinia是一個全類型的狀態管理庫，可以解決這個問題。類型安全爲我們的程序帶來了很多好處，例如防止潛在的運行錯誤，但即使我們不使用TypeScript開發程序，也會獲得其他很多好處，這要感謝Pinia開發體驗的設計，如自動完成和自動建議。爲了使用這些功能，建議在定義state時使用箭頭函數，這將獲得最佳的類型推斷。Pinia對TypeScript的支持意味着我們可以爲state設置一個interface，自動獲取Actions所需要參數的文檔。例子代碼：

interface ToDoItem {
  item: string;
  id: number;
  done: boolean;
}

export const useTodoStore = defineStore('ToDoStore', {
  state: () => ({
    todos:[] as ToDoItem[]
  }),
  actions: {
    addTodo(item: string) {
    this.todos.push({ item, id: this.id++, done: false })
    }
  }
})

5. 應該使用pinia還是vuex

儘管pinia已經被認定爲vue官方的狀態管理解決方案，但這並不意味着vuex已經被棄用了，如果我們生產環境的應用已經使用了vuex，那麼建議繼續使用vuex，因爲從一個庫遷移到另一個庫需要大量的工作和時間。但是如果項目還處於早期開發階段，那麼pinia是個不錯的選擇。

參考：https://www.vuemastery.com/blog/advantages-of-pinia-vs-vuex/

前端很美 每日分享前端乾貨。

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

猜你喜歡