使用 Vue 3.0，你可能不再需要Vuex了
Vuex?是一個很棒的狀態(tài)管理庫。它很簡單，并與?Vue?集成的非常好。為什么會有人放棄?Vuex?? 原因可能是即將發(fā)布的?Vue3?版本公開了底層的響應式系統(tǒng)，并介紹了構建應用程序的新方法。新的響應式系統(tǒng)非常強大，它可以直接用于集中的狀態(tài)管理。
你需要狀態(tài)共享嗎？
在某些情況下，多個組件之間的數(shù)據(jù)流轉變得非常困難，因此需要集中的狀態(tài)管理。這些情況包括:
多個組件使用相同數(shù)據(jù)的 組件深嵌套
如果以上情況都不成立，答案很簡單，你不再需要狀態(tài)共享了。
但是，如果你有以上一種情況呢？最直接的答案就是使用?Vuex?。這是一個久經(jīng)考驗的解決方案，而且效果不錯。
但是，如果你不想添加其他依賴項或發(fā)現(xiàn)設置過于復雜怎么辦？新的?Vue3?版本以及?Composition API?可以通過其內置方法解決這些問題。
新的解決方案
共享狀態(tài)必須符合兩個條件：
響應式：當狀態(tài)改變時，使用它們的組件也應更新 可用性：可以在任何組件中訪問狀態(tài)
響應式
Vue3?通過眾多功能公開了其響應式系統(tǒng)。你可以使用?reactive?函數(shù)創(chuàng)建響應式變量（替代方法是?ref?函數(shù)）。
import?{?reactive?}?from?'vue';
export?const?state?=?reactive({?counter:?0?});
從?reactive?函數(shù)返回的?Proxy?對象是可以跟蹤其屬性更改的對象。在組件模板中使用時，當響應值發(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?應用中任何指都能訪問到。
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');
<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>