背景

隨著Vue3的逐步應用，對狀態管理的需求越來越多。起初是基于Vuex4進行狀態管理的，但是Vuex4也暴露了一些問題。從個人角度來說，Vuex4類似于過渡期產品，對TypeScript的支持性并不完整。如果使用TypeScript編寫組件，需要遵循一定步驟后，才可以正確進行類型推斷，并且對modules的使用上也并不友好。Vuex核心貢獻者Kia King也表示Vuex5已經在計劃中，并且能提供完整的TypeScript支持，那么在Vuex5面世之前，或者直接'舍棄'Vuex的話有沒有其他狀態管理的方案？

Provide / Inject

provide和inject并不是Vue3的新特性，在Vue2中就已經存在了。文檔中提到provide和inject綁定并不是可響應的。然而，如果你傳入了一個可監聽的對象，那么其對象的property還是可響應的。

Vue3在Computed與watch的基礎上新增了響應性API ref和reactive，可以更加方便provide和inject的應用，再結合Composition API的思想，是否能實現一個簡易版的狀態管理？

抽離共享狀態

// src/context/calculator.tsimport { ref, inject, provide, readonly } from ’vue’;type Calculator = { count: number; increase: () => void; updateCount: (num: number) => void;};//provide的key,唯一令牌const CalculatorSymbol = Symbol();//提供者export const calculatorProvide = () => { //數目 const count = ref<number>(1); //遞增方法 const increase = () => {count.value++; }; //更新方法 const updateCount = (num: number) => {count.value = num; }; //提供的共享狀態對象 const depends = {count: readonly(count), //狀態只讀，通過方法進行修改increase,updateCount }; //使用provide api實現狀態對象提供 provide(CalculatorSymbol, depends); //返回狀態對象，讓同級可調用 return depends;};//注入方法export const calculatorInject = () => { //使用inject api注入狀態 const calculatorContext = inject<Calculator>(CalculatorSymbol); //未共享就注入的錯誤校驗 if (!calculatorContext) {throw new Error(’Inject must be used affer Provide’); } //返回注入的貢獻狀態 return calculatorContext;};提供數據

相比起Vuex的全局共享，利用Provide / Inject可以實現全局或者局部共享，

全局共享，可以在main.ts中注入全局狀態：

// src/main.tsimport { createApp, h } from ’vue’;import App from ’@/App.vue’;import { calculatorProvide } from ’@/context/calculator’;// 創建vue實例const app = createApp({ setup() {calculatorProvide();return () => h(App); }});// 掛載實例app.mount(’#app’);

如果只想局部共享，可以在父組件中注入狀態

// src/views/parent.vueimport { defineComponent } from 'vue';import { calculatorProvide } from ’@/context/calculator’;export default defineComponent({ name: 'parent', setup() { //共享數據 calculatorProvide(); }});注入數據

子組件可以通過狀態注入，使用或修改狀態

// src/views/child.vueimport { defineComponent } from 'vue';import { calculatorInject } from ’@/context/calculator’;export default defineComponent({ name: 'child', setup() { //注入數據 const { count, increase, updateCount } = calculatorInject(); }});小結

實際上，你可以將依賴注入(Provide / Inject)看作是'long range props'，除了：

父組件不需要知道哪些子組件使用它provide的property 子組件不需要知道inject的property來自哪里

Vue3使依賴注入的使用更加靈活便捷，以此仿造了小型的狀態管理，個人測試上，對TypeScript的支持性比較完整

reactive

那么不使用Provide / Inject，還有別的方法可以實現狀態管理嗎？直接上代碼。

抽離共享狀態

// src/context/calculator.tstype Calculator = { count: number; increase: () => void; updateCount: (num: number) => void;};//共享狀態const calculatorStore = reactive<Calculator>({ count: 1, increase: () => {calculatorStore.count++; }, updateCount: (num: number) => {calculatorStore.count = num; }});export { calculatorStore };使用共享狀態

使用狀態的方法很簡單，只需要import狀態即可，需要使用狀態的組件，都需要導入

// src/views/any.vueimport { defineComponent } from 'vue';import { calculatorStore } from ’@/context/calculator’;export default defineComponent({ name: 'any', setup() { console.log(calculatorStore.count); }});小結

其實這個方案利用的是reactive的響應性及import同一實例原理，相比起依賴注入來的更簡單粗暴，也能正確支持TypeScript校驗。但是依賴注入可以在不同根節點共享不同的數據，而這個reactive方案永遠共享的是一個實例，在某些業務場景下并不適用。

結語

首先，Vuex仍舊是更成熟全面的方案，只是針對一些簡單的狀態管理，可以嘗試換個思路解決；當然以上的方案可能還有很多考慮不全地方，歡迎各位大神指點指點~

以上就是Vue3狀態管理的使用詳解的詳細內容，更多關于Vue3狀態管理的使用的資料請關注好吧啦網其它相關文章！