Vuex與Pinia在設(shè)計與實現(xiàn)上有什么區(qū)別

本篇內(nèi)容主要講解“Vuex與Pinia在設(shè)計與實現(xiàn)上有什么區(qū)別”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習“Vuex與Pinia在設(shè)計與實現(xiàn)上有什么區(qū)別”吧!

Vue 狀態(tài)管理

首先，先介紹一下 Vue 框架自身提供的狀態(tài)管理的方式。

Vue 組件內(nèi)主要涉及到狀態(tài)、動作和視圖三個組成部分。

在選項式 API 中通過 data 方法返回一個狀態(tài)對象，通過 methods 方法設(shè)置修改狀態(tài)的動作。

如果使用組合式 API + setup 語法糖，則是通過 reactive 方法生成狀態(tài)，而動作只需要當做普通函數(shù)或者箭頭函數(shù)進行定義即可。

選項式 API：

<script>
export default {
  data() {  // 狀態(tài) state
    return {
      count: 0
    }
  },
  methods() { // 動作 action
    increment() {
      this.count++
    }
  }
}
</script>
// 視圖 view
<template> {{ count }} </template>

組合式 API + setup 語法糖：

<script setup>
import { reactive } from 'Vue'
// 狀態(tài) state
const state = reactive({
  count: 0
})
// 動作 action
const increment = () => {
  state.count++
}
</script>
// 視圖 view
<template> {{ state.count }} </template>

視圖由狀態(tài)生成，操作可以修改狀態(tài)。

如果可以將頁面的某一部分單獨抽離成與外界解耦的狀態(tài)、視圖、動作組成的獨立個體，那么 Vue 提供的組件內(nèi)的狀態(tài)管理方式已經(jīng)足夠了。

但是開發(fā)中經(jīng)常會遇到這兩種情況：

• 多個頁面組件依賴于相同的狀態(tài)。

• 在多個頁面組件內(nèi)的不同交互行為需要修改同一個狀態(tài)。

比如我們要做一個主題定制功能，需要在項目入口處獲取接口中的顏色參數(shù)，然后在整個項目的很多頁面都要使用到這個數(shù)據(jù)。

一種方法是使用 CSS 變量，在頁面的最頂層的 root 元素上定義一些 CSS 變量，在 Sass 中使用 var() 初始化一個 Sass 變量，所有頁面都引用這個變量即可。在項目入口處獲取接口數(shù)據(jù)，需要手動去修改 root 元素上的 css 變量。

在 Vue 中，框架提供了一種 v-bind 的方式去編寫 css，我們可以考慮將所有顏色配置存放在一個統(tǒng)一的 store 里面。

遇到這兩種情況，通常我們會通過組件間通信的方式解決，比如：

• 對于相鄰的父子組件：props/emit

• defineProps({})

• defineEmits(['change', '...'])

• 對于多層級嵌套：provide/inject

• provide(name: string | symbol, value: any)

• inject(name: string | symbol, defaultValue: any)

1、如果是相鄰的父子組件之間通信，可以通過 props+emit 的方式，父組件通過子組件的 props 傳入數(shù)據(jù)，在子組件內(nèi)部通過 emit 方法觸發(fā)父組件的一些方法。

2、如果不是直接相鄰，而是中間相隔很多層的嵌套關(guān)系，那么可以使用 provide+inject 的方式，高層級的組件拋出狀態(tài)和動作，低層級的組件接收使用數(shù)據(jù)和觸發(fā)動作。

如果目標的兩個組件并不在同一條組件鏈上，一種可能的解決方法是「狀態(tài)提升」。

可以把共同的狀態(tài)存儲在二者的最小公共祖先組件上，然后再通過上述兩種方式進行通信。

• 前者：公共祖先組件存儲狀態(tài)，通過 props 逐級傳遞響應(yīng)式狀態(tài)以及其關(guān)聯(lián)的操作到子組件。

• 后者：公共祖先作為提供方，多個后代組件作為注入方獲取數(shù)據(jù)以及操作數(shù)據(jù)。

后者編寫代碼更簡潔，更不容易出錯。

這樣已經(jīng)能夠解決大多數(shù)場景的問題了，那么在框架之外的狀態(tài)管理工具，到底能提供哪些與眾不同的能力？

Vuex 與 Pinia 核心思想與用法

Flux 架構(gòu)

Flux 是 Facebook 在構(gòu)建大型 Web 應(yīng)用程序時為了解決數(shù)據(jù)一致性問題而設(shè)計出的一種架構(gòu)，它是一種描述狀態(tài)管理的設(shè)計模式。絕大多數(shù)前端領(lǐng)域的狀態(tài)管理工具都遵循這種架構(gòu)，或者以它為參考原型。

Flux 架構(gòu)主要有四個組成部分：

• store：狀態(tài)數(shù)據(jù)的存儲管理中心，可以有多個，可以接受 action 做出響應(yīng)。

• view：視圖，根據(jù) store 中的數(shù)據(jù)渲染生成頁面，與 store 之間存在發(fā)布訂閱關(guān)系。

• action：一種描述動作行為的數(shù)據(jù)對象，通常會包含動作類型 type 和需要傳遞的參數(shù) payload 等屬性。

• dispatcher：調(diào)度器，接收 action 并分發(fā)至 store。

整個數(shù)據(jù)流動關(guān)系為：

1、view 視圖中的交互行為會創(chuàng)建 action，交由 dispatcher 調(diào)度器。

2、dispatcher 接收到 action 后會分發(fā)至對應(yīng)的 store。

3、store 接收到 action 后做出響應(yīng)動作，并觸發(fā) change 事件，通知與其關(guān)聯(lián)的 view 重新渲染內(nèi)容。

這就是 Flux 架構(gòu)最核心的特點：單向數(shù)據(jù)流。

與傳統(tǒng)的 MVC 架構(gòu)相比，單向數(shù)據(jù)流也帶來了一個好處：可預(yù)測性。

所有對于狀態(tài)的修改都需要經(jīng)過 dispatcher 派發(fā)的 action 來觸發(fā)的，每一個 action 都是一個單獨的數(shù)據(jù)對象實體，可序列化，操作記錄可追蹤，更易于調(diào)試。

Vuex 與 Pinia 大體上沿用 Flux 的思想，并針對 Vue 框架單獨進行了一些設(shè)計上的優(yōu)化。

Vuex

• state：整個應(yīng)用的狀態(tài)管理單例，等效于 Vue 組件中的 data，對應(yīng)了 Flux 架構(gòu)中的 store。

• getter：可以由 state 中的數(shù)據(jù)派生而成，等效于 Vue 組件中的計算屬性。它會自動收集依賴，以實現(xiàn)計算屬性的緩存。

• mutation：類似于事件，包含一個類型名和對應(yīng)的回調(diào)函數(shù)，在回調(diào)函數(shù)中可以對 state 中的數(shù)據(jù)進行同步修改。

• Vuex 不允許直接調(diào)用該函數(shù)，而是需要通過 store.commit 方法提交一個操作，并將參數(shù)傳入回調(diào)函數(shù)。

• commit 的參數(shù)也可以是一個數(shù)據(jù)對象，正如 Flux 架構(gòu)中的 action 對象一樣，它包含了類型名 type 和負載 payload。

• 這里要求 mutation 中回調(diào)函數(shù)的操作一定是同步的，這是因為同步的、可序列化的操作步驟能保證生成唯一的日志記錄，才能使得 devtools 能夠?qū)崿F(xiàn)對狀態(tài)的追蹤，實現(xiàn) time-travel。

• action：action 內(nèi)部的操作不受限制，可以進行任意的異步操作。我們需要通過 dispatch 方法來觸發(fā) action 操作，同樣的，參數(shù)包含了類型名 type 和負載 payload。

• action 的操作本質(zhì)上已經(jīng)脫離了 Vuex 本身，假如將它剝離出來，僅僅在用戶（開發(fā)者）代碼中調(diào)用 commit 來提交 mutation 也能達到一樣的效果。

• module：store 的分割，每個 module 都具有獨立的 state、getter、mutation 和 action。

• 可以使用 module.registerModule 動態(tài)注冊模塊。

• 支持模塊相互嵌套，可以通過設(shè)置命名空間來進行數(shù)據(jù)和操作隔離。

Vuex 中創(chuàng)建 store

import { createStore } from 'Vuex'
export default createStore({
  state: () => {
    return { count: 0 }
  },
  mutations: {
    increment(state, num = 1) {
      state.count += num;
    }
  },
  getters: {
    double(state) {
      return state.count * 2;
    }
  },
  actions: {
    plus(context) {
      context.commit('increment');
    },
    plusAsync(context) {
      setTimeout(() => { context.commit('increment', 2); }, 2000)
    }
  }
})

與 Vue 選項式 API 的寫法類似，我們可以直接定義 store 中的 state、mutations、getters、actions。

其中 mutations、getters 中定義的方法的第一個參數(shù)是 state，在 mutation 中可以直接對 state 同步地進行修改，也可以在調(diào)用時傳入額外的參數(shù)。

actions 中定義的方法第一個參數(shù)是 context，它與 store 具有相同的方法，比如 commit、dispatch 等等。

Vuex 在組件內(nèi)使用

通過 state、getters 獲取數(shù)據(jù)，通過 commit、dispatch 方法觸發(fā)操作。

<script setup>
import { useStore as useVuexStore } from 'Vuex';
const vuex = useVuexStore();
</script>

<template>
  <div>
    <div> count: {{ vuex.state.count }} </div>

    <button @click="() => {
      vuex.dispatch('plus')
    }">點擊這里加1</button>

    <button @click="() => {
      vuex.dispatch('plusAsync')
    }">異步2s后增加2</button>

    <div> double: {{ vuex.getters.double }}</div>
  </div>
</template>

Pinia

保留：

• ? state：store 的核心，與 Vue 中的 data 一致，可以直接對其中的數(shù)據(jù)進行讀寫。

• ? getters：與 Vue 中的計算屬性相同，支持緩存。

• ? actions：操作不受限制，可以創(chuàng)建異步任務(wù)，可以直接被調(diào)用，不再需要 commit、dispatch 等方法。

舍棄：

• ? mutation：Pinia 并非完全拋棄了 mutation，而是將對 state 中單個數(shù)據(jù)進行修改的操作封裝為一個 mutation，但不對外開放接口?？梢栽?devtools 中觀察到 mutation。

• ? module：Pinia 通過在創(chuàng)建 store 時指定 name 來區(qū)分不同的 store，不再需要 module。

Pinia 創(chuàng)建 store

import { defineStore } from 'Pinia'
export const useStore = defineStore('main', {
  state: () => {
    return {
      count: 0
    }
  },
  getters: {
    double: (state) => {
      return state.count * 2;
    }
  },
  actions: {
    increment() {
      this.count++;
    },
    asyncIncrement(num = 1) {
      setTimeout(() => {
        this.count += num;
      }, 2000);
    }
  }
})

Pinia 組件內(nèi)使用

可直接讀寫 state，直接調(diào)用 action 方法。

<script setup>
import { useStore as usePiniaStore } from '../setup/Pinia';
const Pinia = usePiniaStore();
</script>

<template>
  <div>
    <div> count: {{ Pinia.count }}</div>
    <button @click="() => {
       Pinia.count++;
    }">直接修改 count</button>

    <button @click="() => {
      Pinia.increment();
    }">調(diào)用 action</button>

    <button @click="() => {
      Pinia.asyncIncrement();
    }">調(diào)用異步 action</button>
    <div> double: {{ Pinia.double }}</div>
  </div>
</template>

1、對 state 中每一個數(shù)據(jù)進行修改，都會觸發(fā)對應(yīng)的 mutation。

2、使用 action 對 state 進行修改與在 Pinia 外部直接修改 state 的效果相同的，但是會缺少對 action 行為的記錄，如果在多個不同頁面大量進行這樣的操作，那么項目的可維護性就會很差，調(diào)試起來也很麻煩。

Pinia 更加靈活，它把這種選擇權(quán)交給開發(fā)者，如果你重視可維護性與調(diào)試更方便，那就老老實實編寫 action 進行調(diào)用。

如果只是想簡單的實現(xiàn)響應(yīng)式的統(tǒng)一入口，那么也可以直接修改狀態(tài)，這種情況下只會生成 mutation 的記錄。

Pinia action

Pinia 中的 action 提供了訂閱功能，可以通過 store.$onAction() 方法來設(shè)置某一個 action 方法的調(diào)用前、調(diào)用后、出錯時的鉤子函數(shù)。

Pinia.$onAction(({
  name, // action 名稱
  store,
  args, // action 參數(shù)
  after,
  onError
}) => {
  // action 調(diào)用前鉤子

  after((result) => {
    // action 調(diào)用后鉤子
  })
  onError((error) => {
    // 出錯時鉤子，捕獲到 action 內(nèi)部拋出的 error
  })
})

一些實現(xiàn)細節(jié)

Vuex 中的 commit 方法

commit (_type, _payload, _options) {
// 格式化輸入?yún)?shù)
// commit 支持 (type, paload)，也支持對象風格 ({ type: '', ...})
  const {
    type,
    payload,
    options
  } = unifyObjectStyle(_type, _payload, _options)

  const mutation = { type, payload }
  const entry = this._mutations[type]
  this._withCommit(() => {
    entry.forEach(function commitIterator (handler) {
      handler(payload)
    })
  })
  this._subscribers
    .slice()
    .forEach(sub => sub(mutation, this.state))
}

在使用 commit 時，可以直接傳入?yún)?shù) type 和 payload，也可以直接傳入一個包含 type 以及其他屬性的 option 對象。

Vuex 在 commit 方法內(nèi)會先對這兩種參數(shù)進行格式化。

Vuex 中的 dispatch 方法

dispatch (_type, _payload) {
  const {
    type,
    payload
  } = unifyObjectStyle(_type, _payload)

  const action = { type, payload }
  const entry = this._actions[type]
// try sub.before 調(diào)用前鉤子
  try {
    this._actionSubscribers
      .slice()
      .filter(sub => sub.before)
      .forEach(sub => sub.before(action, this.state))
  } catch (e) {
// ……
  }
// 調(diào)用 action，對于可能存在的異步請求使用 promiseAll 方式調(diào)用
  const result = entry.length > 1
    ? Promise.all(entry.map(handler => handler(payload)))
    : entry[0](payload)

  return new Promise((resolve, reject) => {
    result.then(res => {
      // …… try sub.after 調(diào)用后鉤子
      resolve(res)
    }, error => {
      // …… try sub.error 調(diào)用出錯鉤子
      reject(error)
    })
  })
}

從這兩個方法的實現(xiàn)中也可以看出 mutations、actions 的內(nèi)部實現(xiàn)方式。

所有的 mutations 放在同一個對象內(nèi)部，以名稱作為 key，每次 commit 都會獲取到對應(yīng)的值并執(zhí)行操作。

actions 操作與 mutations 類似，但是增加了一個輔助的數(shù)據(jù) actionSubscribers，用于觸發(fā) action 調(diào)用前、調(diào)用后、出錯時的鉤子函數(shù)。

輔助函數(shù) mapXXX

在 Vuex 中，每次操作都要通過 this.$store.dispatch()/commit()。

如果想要批量將 store 中的 state、getters、mutations、actions 等映射到組件內(nèi)部，可以使用對應(yīng)的 mapXXX 輔助函數(shù)。

export default {
  computed: {
    ...mapState([]),
    ...mapGetters([])
  },
  methods: {
    ...mapMutations(['increment']), // 將 this.increment 映射到 this.$store.commit('increment')
    ...mapActions({
      add: 'incremnet'  // 傳入對象類型，實現(xiàn)重命名的映射關(guān)系
    })
  }
}

在 Pinia + 組合式 API 下，通過 useStore 獲取到 store 后，可以直接讀寫數(shù)據(jù)和調(diào)用方法，不再需要輔助函數(shù)。

狀態(tài)管理工具的優(yōu)勢

• devtools 支持

• 記錄每一次的修改操作，以時間線形式展示。

• 支持 time-travel，可以回退操作。

• 可以在不刷新頁面的情況下實現(xiàn)對 store 內(nèi)部數(shù)據(jù)的修改。

• Pinia 與 Vuex 相比

• Vuex 中的很多屬性缺少類型支持，需要開發(fā)者自行進行模塊類型的聲明。

• Pinia 中的所有內(nèi)容都是類型化的，盡可能地利用了 TS 的類型推斷。

• 舍棄了 mutation，減少了很多不必要的代碼。

• 可以直接對數(shù)據(jù)進行讀寫，直接調(diào)用 action 方法，不再需要 commit、dispatch。

• 接口更簡單，代碼更簡潔：

• 更好的 TypeScript 支持：

最后

當項目涉及的公共數(shù)據(jù)較少時，我們可以直接利用 Vue 的響應(yīng)式 API 來實現(xiàn)一個簡單的全局狀態(tài)管理單例：

export const createStore = () => {
  const state = reactive({
    count: 0;
  })
  const increment = () => {
    state.count++;
  }
  return {
    increment,
    state: readonly(state)
  }
}

為了使代碼更容易維護，結(jié)構(gòu)更清晰，通常會將對于狀態(tài)的修改操作與狀態(tài)本身放在同一個組件內(nèi)部。提供方可以拋出一個響應(yīng)式的 ref 數(shù)據(jù)以及對其進行操作的方法，接收方通過調(diào)用函數(shù)對狀態(tài)進行修改，而非直接操作狀態(tài)本身。同時，提供方也可以通過 readonly 包裹狀態(tài)以禁止接收方的直接修改操作。

到此，相信大家對“Vuex與Pinia在設(shè)計與實現(xiàn)上有什么區(qū)別”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習！