Tengo la siguiente tienda:
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; }, }, });Ahora digamos que quiero convertir la propiedad "palabra clave" anterior en una Ref. Así es como lo hice:
const myStore = useMyStore(); const { keyword: needle } = storeToRefs(myStore);También tengo la siguiente propiedad calculada en mi componente:
const page = computed({ get: () => myStore.transStatus.nextPage, set: (value) => (myStore.transStatus.nextPage = value), });que funciona bien Sin embargo, me gustaría saber cómo usar el mismo "storeToRefs" anterior para definir la "página". Intenté esto:
const { keyword: needle, transStatus: { nextPage: page } } = storeToRefs(myStore);Pero dice "la página no está definida". ¿Qué estoy haciendo mal? ¿Es esto posible?
Como sugiere el nombre de storeToRefs , devuelve referencias. transStatus es una referencia y no tiene la propiedad nextPage , es transStatus.value.nextPage . La destrucción temprana de nextPage daría como resultado la pérdida de reactividad debido a la forma en que funciona transStatus y porque el valor es escalar.
En caso de que este sea un escenario de uso común, la tienda puede incorporar la page computada. Dado que se supone que el estado de la tienda no debe mutar fuera de una tienda, la page se puede combinar con la acción setPage .