solidjs 處理復雜類型的響應式

在 solidjs 里響應式一般直接用 createSignal 就可以，但 createSignal 一般用于基礎數據類型。

雖然復雜類型也是可以使用，但基于起細粒度響應性的特性。
一般復雜的數據使用 createSignal 就不是那么友好了。

所以 createStore 就來了。

例子如下：用 createSignal 的話就要設置整個 formData 以覆蓋原值。

const [formData, setFormData] = createSignal<formData>({columnID: "0",pageSize: 20,keyword: "",
});// 修改keyword的值
setFormData({...keyword: "xxx",
})//或者
setFormData(prev => ({ ...prev, keyword: "xxx" }));

明顯的當 createSignal 用于對象時，每次更新都需要創建新對象。

使用 createStore 代替。

const [formData, setFormData] = createStore<formData>({columnID: "0",pageSize: 20,keyword: "",
});setFormData("keyword", newValue);

那么增加更復雜的對象

const [formData, setFormData] = createStore<formData>({columnID: "0",pageSize: 20,keyword: "",details:{address:""}
});// 修改address，使用路徑setFormData("details","address", addressValue);

是不是一下在就清晰明了。接下來就是實戰了。

我有一個表單，formData 類型還是上面的，。

// 可以直接設置
<inputtype="text"value={formData.details.address}onInput={(e)=> setFormData("details","address",e.target.value);}
/>

添加自定義方法基礎款

const updateField = (path: any) => (e: any) => {setFormData(path, e.target.value);
};<inputtype="text"value={formData.keyword}onInput={updateField("keyword")}
/>

添加自定義方法進階款，適用有套嵌

const updateField = (path: any) => (e: any) => {setFormData(...path, e.target.value);
};<inputtype="text"value={formData.details.address}onInput={updateField(["details","address"])}
/>
<inputtype="text"value={formData.keyword}onInput={updateField(["keyword"])}
/>

若數組(嚴格來說這里是元組)不好看。改用 string 也是可以的。

const updateField = (path: string) => (e: any) => {const keys = field.split(".");setFormData(...keys, e.target.value);
};<inputtype="text"value={formData.details.address}onInput={updateField("details.address")}
/>
// 是不是一下子就美觀多了。

若在 TS 項目中使用會報錯…keys 這里會報擴展參數必須元組類型或這傳遞參數 rest，比較蛋疼不影響使用。但也是可以解決的，雖然是取巧，但 anyScript 嘛

const updateField = (field: string) => (e: Event) => {const keys = field.split(".");(setFormData as any)(...keys, (e.target as HTMLInputElement).value);
};