前言
Vuex 是一個很棒的狀態管理庫。它很簡單，並與 Vue 整合的非常好。為什麼會有人放棄 Vuex ? 原因可能是即將釋出的 Vue3 版本公開了底層的響應式系統，並介紹了構建應用程式的新方法。新的響應式系統非常強大，它可以直接用於集中的狀態管理。
你需要狀態共享嗎？在某些情況下，多個元件之間的資料流轉變得非常困難，因此需要集中的狀態管理。這些情況包括:
多個元件使用相同資料的元件深巢狀如果以上情況都不成立，答案很簡單，你不再需要狀態共享了。
但是，如果你有以上一種情況呢？最直接的答案就是使用 Vuex 。這是一個久經考驗的解決方案，而且效果不錯。
但是，如果你不想新增其他依賴項或發現設定過於複雜怎麼辦？新的Vue3 版本以及 Composition API 可以通過其內建方法解決這些問題。
新的解決方案共享狀態必須符合兩個條件：
響應式：當狀態改變時，使用它們的元件也應更新可用性：可以在任何元件中訪問狀態響應式Vue3 通過眾多功能公開了其響應式系統。你可以使用 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 方法時，該方法中的任何子元件都可以使用該值。Symbol 提供和檢索值時，key 使用相同的名稱。
這樣，如果你在最頂層的元件上提供值，那麼它將在所有元件中可用。另外，還可以在主應用程式例項上呼叫 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 物件中傳遞的變數，該代理物件阻止任何修改(在嘗試修改時發出警告)。這些變化可以由能夠訪問可寫儲存的單獨函式來處理。
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 具有更多的功能，例如模組處理，但有時我們並不需要。