我有以下商店：
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;
},
},
});
現在假設我想將上面的“關鍵字”屬性轉換為 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);
但它說“頁面未定義”。我究竟做錯了什么？這甚至可能嗎？
uj5u.com熱心網友回復：
顧名思義storeToRefs，它回傳 refs。transStatus是 ref 并且沒有nextPage屬性，它是transStatus.value.nextPage. 由于作業方式和值是標量，提前解構nextPage會導致反應性喪失。transStatus
如果這是一個常見的使用場景，商店可以合并page計算。由于 store 狀態不應該在 store 之外發生變化，page因此可以與setPageaction 結合使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/468388.html
標籤：javascript Vue.js 松树