Wie kann man eine Objekteigenschaft von einem Pinia-Getter bedingt zerstören?

Question

Ich habe folgende Geschäfte:

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

Angenommen, ich möchte das obige „Keyword“-Attribut in ein Ref-Attribut umwandeln. Das habe ich gemacht:

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

Ich habe außerdem die folgenden berechneten Eigenschaften in meiner Komponente:

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

Es funktioniert großartig. Ich würde jedoch gerne wissen, wie man „Seiten“ mit den gleichen „storeToRefs“ oben definiert. Ich habe Folgendes versucht:

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

Aber es heißt „Seite ist nicht definiert“. Was habe ich falsch gemacht? Ist es möglich?

Answer 1

正如 storeToRefs 名称所示，它返回引用。 transStatus 是一个引用，没有 nextPage 属性，它是 transStatus.value.nextPage。由于 transStatus 的工作方式以及该值是标量，过早解构 nextPage 会导致反应性丧失。

如果这是常见的使用场景，商店可以合并 page 计算。由于商店状态不应在商店外部发生变化，因此 page 可以与 setPage 操作结合使用。