Vue 3中的Reactivity引入了新的方式來構建你的應用程式。

Vuex是一個很棒的狀態管理庫。它很簡單，並且可以與Vue很好地整合。為什麼有人會離開Vuex？原因可能是即將釋出的Vue 3版本暴露了底層的響應式系統，並引入了構建應用程式的新方法。新的響應式系統非常強大，可以用於集中狀態管理。

你是否需要共享狀態？

在某些情況下，多個元件之間的資料流變得非常困難，你需要集中式狀態管理。這些情況包括：

多個元件使用相同的資料。多根與資料訪問。元件的深層巢狀。

如果上述情況都不是真的，那麼很容易確定您是否需要它。你不需要。

但是如果你有這樣的情況呢？最直接的答案是使用Vuex。這是經過考驗的解決方案，並且做得不錯。

但是，如果你不想新增其他依賴項或發現設定過於複雜怎麼辦？連同Composition API一起，新的Vue 3版本可以通過其內建方法解決這些問題。

新解決方案

共享狀態必須符合兩個條件：

響應式：狀態更改時，使用它們的元件也應更新。可用性：可以在任何元件中訪問狀態。

/ 響應式 /

Vue 3通過眾多功能公開了其響應式系統。你可以使用 reactive 函式建立響應式變數（替代方法是 ref 函式）：

import { reactive } from 'vue';export const state = reactive({ counter: 0 });

從 reactive 函式返回的物件是 Proxy 物件，可以跟蹤其屬性的更改。當在元件的模板中使用時，每當響應值改變時，元件就會重新渲染。

<template> <div>{{ state.counter }}</div> <button type="button" @click="state.counter++">Increment</button></template><script> import { reactive } from 'vue'; export default { setup() { const state = reactive({ counter: 0 }); return { state }; } };</script>

/ 可用性 /

上面的示例非常適合單個元件，但其他元件無法訪問狀態。為了克服這個問題，你可以使用 provide 和 inject 方法在Vue 3應用程式中提供任何可用的值。

import { reactive, provide, inject } from 'vue';export const stateSymbol = Symbol('state');export const createState = () => reactive({ counter: 0 });export const useState = () => inject(stateSymbol);export const provideState = () => provide( stateSymbol,  createState());

當你將 Symbol 作為鍵和值傳遞給 Provide 方法時，該值將通過 inject 方法可用於任何子元件。關鍵是在提供和檢索值時使用相同的 Symbol 名稱。

這樣，如果你在最上面的元件上提供了值，那麼它將在所有元件中都可用。另外，你也可以在主應用程式例項上呼叫 provide：

import { createApp, reactive } from 'vue';import App from './App.vue';import { stateSymbol, createState } from './store';const app = createApp(App);app.provide(stateSymbol, createState());app.mount('#app');

<script> import { useState } from './state'; export default { setup() { return { state: useState() }; } };</script>

讓它更強大

上面的解決方案有效，但有一個缺點：你不知道是誰修改了什麼。狀態可以直接更改，沒有限制。

你可以通過使用 readonly 函式包裝狀態來使其受到保護。它覆蓋了 Proxy 物件中傳遞的變數，防止任何修改（當你嘗試時發出警告）。突變可以通過單獨的函式來處理，這些函式可以訪問可寫store。

import { reactive, readonly } from 'vue';export const createStore = () => { const state = reactive({ counter: 0 }); const increment = () => state.counter++; return { increment, state: readonly(state) };}

外界只能訪問只讀狀態，只有匯出的函式才能修改可寫狀態。

通過保護狀態免受不必要的修改，新解決方案相對接近Vuex。

結束

通過使用Vue 3的響應式系統和依賴注入機制，我們已經從區域性狀態到集中狀態管理，可以在小型應用中取代Vuex。

我們有一個狀態物件，該物件是隻讀的，並且對模板的更改有響應。只能通過Vuex中的actions/mutations等特定方法來修改狀態。你可以使用 computed 函式定義其他getter。

Vuex具有更多功能，例如模組處理，但有時我們不需要。

如果你想探索Vue 3並嘗試這種狀態管理方法，請檢視我的Vue 3 playground。

Vue 3 playground：https://github.com/blacksonic/vue-3-playground