使用 Vue 3.0，你可能不再需要Vuex了
溫馨提示：文末送四本書~
Vuex 是一個很棒的狀態(tài)管理庫。它很簡單，并與 Vue 集成的非常好。為什么會有人放棄 Vuex ? 原因可能是即將發(fā)布的 Vue3 版本公開了底層的響應(yīng)式系統(tǒng)，并介紹了構(gòu)建應(yīng)用程序的新方法。新的響應(yīng)式系統(tǒng)非常強大，它可以直接用于集中的狀態(tài)管理。
你需要狀態(tài)共享嗎？
在某些情況下，多個組件之間的數(shù)據(jù)流轉(zhuǎn)變得非常困難，因此需要集中的狀態(tài)管理。這些情況包括:
多個組件使用相同數(shù)據(jù)的 組件深嵌套
如果以上情況都不成立，答案很簡單，你不再需要狀態(tài)共享了。
但是，如果你有以上一種情況呢？最直接的答案就是使用 Vuex 。這是一個久經(jīng)考驗的解決方案，而且效果不錯。
但是，如果你不想添加其他依賴項或發(fā)現(xiàn)設(shè)置過于復(fù)雜怎么辦？新的 Vue3 版本以及 Composition API 可以通過其內(nèi)置方法解決這些問題。
新的解決方案
共享狀態(tài)必須符合兩個條件：
響應(yīng)式：當狀態(tài)改變時，使用它們的組件也應(yīng)更新 可用性：可以在任何組件中訪問狀態(tài)
響應(yīng)式
Vue3 通過眾多功能公開了其響應(yīng)式系統(tǒng)。你可以使用 reactive 函數(shù)創(chuàng)建響應(yīng)式變量（替代方法是 ref 函數(shù)）。
import?{?reactive?}?from?'vue';
export?const?state?=?reactive({?counter:?0?});
從 reactive 函數(shù)返回的 Proxy 對象是可以跟蹤其屬性更改的對象。在組件模板中使用時，當響應(yīng)值發(fā)生更改時，組件都會重新渲染。
??<div>{{?state.counter?}}div>
??<button?type="button"?@click="state.counter++">Incrementbutton>
template>
<script>
??import?{?reactive?}?from?'vue';
??export?default?{
????setup()?{
??????const?state?=?reactive({?counter:?0?});
??????return?{?state?};
????}
??};
script>
可用性
上面的示例對于單個組件非常有用，但是其他組件無法訪問狀態(tài)。為了克服這個問題，你可以使用 provide 和 inject 方法，使 Vue 3 應(yīng)用中任何指都能訪問到。
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 使用相同的名稱。
這樣，如果你在最頂層的組件上提供值，那么它將在所有組件中可用。另外，還可以在主應(yīng)用程序?qū)嵗险{(diào)用 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');
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>