文章轉(zhuǎn)載自公眾號：code秘密花園
Vuex 是一個(gè)很棒的狀態(tài)管理庫。它很簡單，并與 Vue 集成的非常好。為什么會有人放棄Vuex ? 原因可能是即將發(fā)布的 Vue3 版本公開了底層的響應(yīng)式系統(tǒng)，并介紹了構(gòu)建應(yīng)用程序的新方法。新的響應(yīng)式系統(tǒng)非常強(qiáng)大，它可以直接用于集中的狀態(tài)管理。
你需要狀態(tài)共享嗎？
在某些情況下，多個(gè)組件之間的數(shù)據(jù)流轉(zhuǎn)變得非常困難，因此需要集中的狀態(tài)管理。這些情況包括:
- 多個(gè)組件使用相同數(shù)據(jù)的
- 組件深嵌套
如果以上情況都不成立，答案很簡單，你不再需要狀態(tài)共享了。
但是，如果你有以上一種情況呢？最直接的答案就是使用 Vuex 。這是一個(gè)久經(jīng)考驗(yàn)的解決方案，而且效果不錯(cuò)。
但是，如果你不想添加其他依賴項(xiàng)或發(fā)現(xiàn)設(shè)置過于復(fù)雜怎么辦？新的Vue3 版本以及 Composition API 可以通過其內(nèi)置方法解決這些問題。
新的解決方案
共享狀態(tài)必須符合兩個(gè)條件：
- 響應(yīng)式：當(dāng)狀態(tài)改變時(shí)，使用它們的組件也應(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 對象是可以跟蹤其屬性更改的對象。在組件模板中使用時(shí)，當(dāng)響應(yīng)值發(fā)生更改時(shí)，組件都會重新渲染。
<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>可用性
上面的示例對于單個(gè)組件非常有用，但是其他組件無法訪問狀態(tài)。為了克服這個(gè)問題，你可以使用 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()
);
當(dāng)您將 Symbol 作為鍵和值傳遞給 provide 方法時(shí)，該方法中的任何子組件都可以使用該值。Symbol 提供和檢索值時(shí)，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');
<script>
import { useState } from './state';
export default {
setup() {
return { state: useState() };
}
};
</script>讓代碼更加健壯
上面的解決方案有效，但有一個(gè)缺點(diǎn)：你不知道是誰修改了什么。狀態(tài)可以直接更改，沒有限制。
你可以使用 readonly 函數(shù)將狀態(tài)包裝起來，用以保護(hù)狀態(tài)。它覆蓋了在Proxy 對象中傳遞的變量，該代理對象阻止任何修改(在嘗試修改時(shí)發(fā)出警告)。這些變化可以由能夠訪問可寫存儲的單獨(dú)函數(shù)來處理。
import { reactive, readonly } from 'vue';
export const createStore = () => {
const state = reactive({ counter: 0 });
const increment = () => state.counter++;
return { increment, state: readonly(state) };
}外部將只能訪問只讀狀態(tài)，并且只有導(dǎo)出的函數(shù)可以修改可寫狀態(tài)。
通過保護(hù)狀態(tài)免受不必要的修改，新解決方案相對接近 Vuex。
總結(jié)
通過使用 Vue 3 的響應(yīng)式系統(tǒng)和依賴項(xiàng)注入機(jī)制，我們已經(jīng)從本地狀態(tài)轉(zhuǎn)變?yōu)榭梢栽谳^小的應(yīng)用程序中替代 Vuex 的集中狀態(tài)管理。
現(xiàn)在我們有；一個(gè)狀態(tài)對象，該對象是只讀的，并且可以對模板的更改作出響應(yīng)。狀態(tài)只能通過特定的方法來修改，比如 Vuex 中的 actions/mutations。可以使用 computed 函數(shù)定義其他 getter 。
Vuex 具有更多的功能，例如模塊處理，但有時(shí)我們并不需要。
以上就是W3Cschool編程獅關(guān)于Vue 3.0 有了它，Vuex或許可以提前退休了的相關(guān)介紹了，希望對大家有所幫助。
