我有以下商店:
export const useMyStore = defineStore('myStore', { state: () => { return { openTransOnly: false, keyword: '', openTransStatus: { nextPage: 0, complete: false }, pastDueTransStatus: { nextPage: 0, complete: false }, }; }, getters: { transStatus(state) { return state.openTransOnly ? state.openTransStatus : state.pastDueTransStatus; }, }, });
現在假設我想將上面的「keyword」屬性轉換為 Ref。我是這樣做的:
const myStore = useMyStore(); const { keyword: needle } = storeToRefs(myStore);
我的元件中還有以下計算屬性:
const page = computed({ get: () => myStore.transStatus.nextPage, set: (value) => (myStore.transStatus.nextPage = value), });
效果很好。但是,我想知道如何使用上面相同的“storeToRefs”來定義“頁面”。我試過這個:
const { keyword: needle, transStatus: { nextPage: page } } = storeToRefs(myStore);
但它說“頁面未定義”。我究竟做錯了什麼?這可能嗎?
P粉3948122772023-11-09 09:55:18
如 storeToRefs
名稱所示,它會傳回引用。 transStatus
是一個引用,沒有 nextPage
屬性,它是 transStatus.value.nextPage
。由於 transStatus
的工作方式以及該值是標量,過早解構 nextPage
會導致反應性喪失。
如果這是常見的使用場景,商店可以合併 page
計算。由於商店狀態不應在商店外部發生變化,因此 page
可以與 setPage
操作結合使用。