記前端狀態管理庫Akita中的一個坑

記狀態管理庫Akita中的一個坑

Akita是什麼

Akita是一種基於RxJS的狀態管理模式，它採用Flux中的多個數據存儲和Redux中的不可變動新的思想，以及流數據的概念，來建立可觀察的數據存儲模型。 不管是Angular、React、Vue、Web組件，仍是普通的舊式JS，秋田均可以完成繁重的工做，並做爲維護乾淨、無樣板、可伸縮的應用程序的有用工具。

Akita基於面向對象的設計原則，而不是函數式編程，所以具備OOP經驗的開發人員應該感到很熟悉。它您的團隊提供了一個不可偏離的固定模式。

注意一個坑

在建立Entity Store時根據需求您可能須要在@StoreConfig()裝飾器中配置Entity Store 的id屬性

直接上代碼

一段ts代碼

import { Todo } from './todo.model';
import { EntityState, EntityStore, StoreConfig } from '@datorama/akita'; ​ export interface TodosState extends EntityState<Todo> { } ​ // fixme 注意這裏 @StoreConfig({ name: 'todos' }) export class TodosStore extends EntityStore<TodosState, Todo> { constructor() { super(); } }

 

這是一段官方的demo，可是其中有個坑。 若您Entity Store中的實體類型中惟一標識不爲id，則須要本身手動設置 Akita @StoreConfig 會默認綁定您實體類型中的id屬性做爲惟一標識，若 不綁定惟一標識且@StoreConfig又找不到id屬性則EntityStore在調用 set存儲數據時會出錯（可是不會報錯。。。。。天坑，不知道時有意爲之仍是bug）

若惟一標識Entity Id不爲id則寫爲下面這種形式

一段ts代碼：

import { Todo } from './todo.model';
import { EntityState, EntityStore, StoreConfig } from '@datorama/akita'; export interface TodosState extends EntityState<Todo> { } // fixme 注意這裏，修改後爲 @StoreConfig({ name: 'todos'，idKey: yourId }) export class TodosStore extends EntityStore<TodosState, Todo> { constructor() { super(); } }

 

吐槽一下： 還有就是官網在文檔關於這個須要特別注意 事項這個惟一標識綁定的介紹是在建立Entity Store以後的...（坑死歐啦）