1. 程式人生 > 其它 >TypeScript-vuex中的一些使用技巧

TypeScript-vuex中的一些使用技巧

當我們希望在vue元件中使用useStore,並想為它指定型別來保證它更安全時,會出現一些問題,

舉個栗子:

 

 這是一個模組化的store,當我們希望使用子模組的型別時,

 

 而在index.ts下同樣拿不到子模組的型別,

解決方案:

新建一個介面,包含子模組的型別,

再定義一個介面來結合index.ts中的state的型別和子模組中state的型別,就像這樣

 

 在index.ts中匯出一個名為useStoreP的函式,為它指定返回值型別時Store<IStoreType>,

 

 在我們希望使用它的元件內

 

 這樣就完成了.

----解釋一下程式碼是啥意思-----

由於vuex中的useStore指定不了子模組中的型別,所以我們要自己建立一個函式來使useStore可以返回一個型別是子模組型別的Store,

這裡的型別指定的是Store中state的型別,我們可以來看一下原始碼

 

-----------------------更新一下---------------------------------

 

我發現vuex官方文件裡已經提供API來解決這個問題了[手動滑稽]

TypeScript 支援 | Vuex (vuejs.org)