How to conditionally destructure an object property from a Pinia getter?-PHP Chinese Network Q&A

I have the following stores:

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; }, }, });

Now let's say I want to convert the "keyword" attribute above into a Ref. This is what I did:

const myStore = useMyStore(); const { keyword: needle } = storeToRefs(myStore);

I also have the following computed properties in my component:

const page = computed({ get: () => myStore.transStatus.nextPage, set: (value) => (myStore.transStatus.nextPage = value), });

good results. However, I would like to know how to define "pages" using the same "storeToRefs" above. I tried this:

const { keyword: needle, transStatus: { nextPage: page } } = storeToRefs(myStore);

But it says "Page is not defined". What did I do wrong? is it possible?

reply all (1)

P粉3948122772023-11-09 09:55:18 1 floor

As thestoreToRefsname suggests, it returns a reference.transStatusis a reference and has nonextPageattribute, it istransStatus.value.nextPage. Due to the waytransStatusworks and the fact that the value is a scalar, premature destructuring ofnextPagecan result in a loss of reactivity.

If this is a common usage scenario, the store can incorporatepagecalculations. Since the store state should not change outside the store,pagecan be used in conjunction with thesetPageaction.