When developing front-end projects, state management is always an unavoidable topic. Vue and the React framework itself provide some capabilities to solve it this problem. However, there are often other considerations when developing large-scale applications, such as the need for more standardized and complete operation logs, time travel capabilities integrated in developer tools, server-side rendering, etc. This article takes the Vue framework as an example to introduce the differences in the design and implementation of the two state management tools, Vuex and Pinia.

Vue state management

---

First of all, let’s introduce the state management method provided by the Vue framework itself. [Related recommendations: vuejs video tutorial, web front-end development]

The Vue component mainly involves three components: state, action and view.

In the optional API, a state object is returned through the data method, and the action to modify the state is set through the methods method.

If you use the combined API setup syntax sugar, the state is generated through the reactive method, and the action only needs to be defined as a normal function or arrow function.

Optional API:

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

Combined API setup Syntactic sugar:

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

The view is generated by the state, and the operation can modify the state.

If a certain part of the page can be isolated into an independent entity composed of states, views, and actions that are decoupled from the outside world, then the state management method within the component provided by Vue is enough.

But these two situations are often encountered in development:

• Multiple page components rely on the same state.
• Different interactive behaviors within multiple page components need to modify the same state.

For example, if we want to create a theme customization function, we need to obtain the color parameters in the interface at the project entrance, and then use this data in many pages of the entire project.

One way is to use CSS variables, define some CSS variables on the top-level root element of the page, use var() in Sass to initialize a Sass variable, which is referenced by all pages Just this variable. To obtain the interface data at the project entrance, you need to manually modify the css variables on the root element.

In Vue, the framework provides a v-bind way to write css. We can consider storing all color configurations in a unified store.

When encountering these two situations, we usually solve them through communication between components, such as:

• For adjacent parent-child components: props/emit
  • defineProps({})
  • defineEmits(['change', '...'])
• For multi-level nesting: provide/inject
  • ##provide(name: string | symbol, value: any)
  • inject(name: string | symbol, defaultValue: any)

1. If the communication is between adjacent parent and child components, you can use props In the emit method, the parent component passes in data through the props of the child component, and triggers some methods of the parent component through the emit method inside the child component.

2. If it is not directly adjacent, but has a nested relationship with many layers in between, then you can use the provide inject method, and the high-level component throws status and Actions, low-level components receive usage data and trigger actions.

#If the two components of the target are not on the same component chain, a possible solution is "state promotion".

You can store the common state in the minimum common ancestor component of the two, and then communicate through the above two methods.

The former: the public ancestor component stores the state, and passes the responsive state and its associated operations to the sub-components step by step through props.
The latter: the common ancestor serves as the provider, and multiple descendant components serve as injectors to obtain data and operate data.

The latter is more concise to write code and less prone to errors.

This can already solve the problems in most scenarios. So what unique capabilities can state management tools outside the framework provide?

The core ideas and usage of Vuex and Pinia

---

##Flux architecture

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

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

• ? store：狀態(tài)數(shù)據(jù)的存儲(chǔ)管理中心，可以有多個(gè)，可以接受 action 做出響應(yīng)。
• ? view：視圖，根據(jù) store 中的數(shù)據(jù)渲染生成頁(yè)面，與 store 之間存在發(fā)布訂閱關(guān)系。
• ? action：一種描述動(dòng)作行為的數(shù)據(jù)對(duì)象，通常會(huì)包含動(dòng)作類型 type 和需要傳遞的參數(shù) payload 等屬性。
• ? dispatcher：調(diào)度器，接收 action 并分發(fā)至 store。

整個(gè)數(shù)據(jù)流動(dòng)關(guān)系為：

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

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

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

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

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

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

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

Vuex

• ? state：整個(gè)應(yīng)用的狀態(tài)管理單例，等效于 Vue 組件中的 data，對(duì)應(yīng)了 Flux 架構(gòu)中的 store。
• ? getter：可以由 state 中的數(shù)據(jù)派生而成，等效于 Vue 組件中的計(jì)算屬性。它會(huì)自動(dòng)收集依賴，以實(shí)現(xiàn)計(jì)算屬性的緩存。
• ? mutation：類似于事件，包含一個(gè)類型名和對(duì)應(yīng)的回調(diào)函數(shù)，在回調(diào)函數(shù)中可以對(duì) state 中的數(shù)據(jù)進(jìn)行同步修改。
  • Vuex 不允許直接調(diào)用該函數(shù)，而是需要通過(guò) store.commit 方法提交一個(gè)操作，并將參數(shù)傳入回調(diào)函數(shù)。
  • commit 的參數(shù)也可以是一個(gè)數(shù)據(jù)對(duì)象，正如 Flux 架構(gòu)中的 action 對(duì)象一樣，它包含了類型名 type 和負(fù)載 payload。
  • 這里要求 mutation 中回調(diào)函數(shù)的操作一定是同步的，這是因?yàn)橥降?、可序列化的操作步驟能保證生成唯一的日志記錄，才能使得 devtools 能夠?qū)崿F(xiàn)對(duì)狀態(tài)的追蹤，實(shí)現(xiàn) time-travel。
• ? action：action 內(nèi)部的操作不受限制，可以進(jìn)行任意的異步操作。我們需要通過(guò) dispatch 方法來(lái)觸發(fā) action 操作，同樣的，參數(shù)包含了類型名 type 和負(fù)載 payload。
  • action 的操作本質(zhì)上已經(jīng)脫離了 Vuex 本身，假如將它剝離出來(lái)，僅僅在用戶（開(kāi)發(fā)者）代碼中調(diào)用 commit 來(lái)提交 mutation 也能達(dá)到一樣的效果。
• ? module：store 的分割，每個(gè) module 都具有獨(dú)立的 state、getter、mutation 和 action。
  • 可以使用 module.registerModule 動(dòng)態(tài)注冊(cè)模塊。
  • 支持模塊相互嵌套，可以通過(guò)設(shè)置命名空間來(lái)進(jìn)行數(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 選項(xiàng)式 API 的寫(xiě)法類似，我們可以直接定義 store 中的 state、mutations、getters、actions。

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

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

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

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

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

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

    <button @click="() => {
      vuex.dispatch(&#39;plus&#39;)
    }">點(diǎn)擊這里加1</button>

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

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

Pinia

保留：

• ? state：store 的核心，與 Vue 中的 data 一致，可以直接對(duì)其中的數(shù)據(jù)進(jìn)行讀寫(xiě)。
• ? getters：與 Vue 中的計(jì)算屬性相同，支持緩存。
• ? actions：操作不受限制，可以創(chuàng)建異步任務(wù)，可以直接被調(diào)用，不再需要 commit、dispatch 等方法。

舍棄：

• ? mutation：Pinia 并非完全拋棄了 mutation，而是將對(duì) state 中單個(gè)數(shù)據(jù)進(jìn)行修改的操作封裝為一個(gè) mutation，但不對(duì)外開(kāi)放接口?？梢栽?devtools 中觀察到 mutation。
• ? module：Pinia 通過(guò)在創(chuàng)建 store 時(shí)指定 name 來(lái)區(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)使用

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

<script setup>
import { useStore as usePiniaStore } from &#39;../setup/Pinia&#39;;
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、對(duì) state 中每一個(gè)數(shù)據(jù)進(jìn)行修改，都會(huì)觸發(fā)對(duì)應(yīng)的 mutation。

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

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

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

Pinia action

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

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

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

一些實(shí)現(xiàn)細(xì)節(jié)

---

Vuex 中的 commit 方法

commit (_type, _payload, _options) {
// 格式化輸入?yún)?shù)
// commit 支持 (type, paload)，也支持對(duì)象風(fēng)格 ({ 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 時(shí)，可以直接傳入?yún)?shù) type 和 payload，也可以直接傳入一個(gè)包含 type 以及其他屬性的 option 對(duì)象。

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

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，對(duì)于可能存在的異步請(qǐng)求使用 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)用出錯(cuò)鉤子
      reject(error)
    })
  })
}

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

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

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

輔助函數(shù) mapXXX

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

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

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

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

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

---

• devtools 支持

  • 記錄每一次的修改操作，以時(shí)間線形式展示。
  • 支持 time-travel，可以回退操作。
  • 可以在不刷新頁(yè)面的情況下實(shí)現(xiàn)對(duì) store 內(nèi)部數(shù)據(jù)的修改。
• Pinia 與 Vuex 相比
  • 接口更簡(jiǎn)單，代碼更簡(jiǎn)潔：
    • 舍棄了 mutation，減少了很多不必要的代碼。
    • 可以直接對(duì)數(shù)據(jù)進(jìn)行讀寫(xiě)，直接調(diào)用 action 方法，不再需要 commit、dispatch。
  • 更好的 TypeScript 支持：
    • Vuex 中的很多屬性缺少類型支持，需要開(kāi)發(fā)者自行進(jìn)行模塊類型的聲明。
    • Pinia 中的所有內(nèi)容都是類型化的，盡可能地利用了 TS 的類型推斷。

最后

---

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

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

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

（學(xué)習(xí)視頻分享：web前端開(kāi)發(fā)、編程基礎(chǔ)視頻）

The above is the detailed content of Let's talk about the differences in design and implementation between Vuex and Pinia. For more information, please follow other related articles on the PHP Chinese website!