Comment déstructurer conditionnellement une propriété d'objet à partir d'un getter Pinia ?

Question

J'ai les magasins suivants :

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

Maintenant, disons que je souhaite convertir l'attribut « mot-clé » ci-dessus en une référence. Voici ce que j'ai fait :

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

J'ai également les propriétés calculées suivantes dans mon composant :

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

Ça fonctionne très bien. Cependant, j'aimerais savoir comment définir des "pages" en utilisant le même "storeToRefs" ci-dessus. J'ai essayé ceci :

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

Mais il est écrit "La page n'est pas définie". Qu'ai-je fait de mal? Est-il possible?

Answer 1

Car storeToRefs 名称所示，它返回引用。 transStatus 是一个引用，没有 nextPage 属性，它是 transStatus.value.nextPage。由于 transStatus 的工作方式以及该值是标量，过早解构 nextPage peut provoquer une perte de réactivité.

S'il s'agit d'un scénario d'utilisation courant, le magasin peut être combiné avec les opérations page 计算。由于商店状态不应在商店外部发生变化，因此 page 可以与 setPage.