如何從有條件地返回 object 的 Pinia getter 中解構 object 屬性？

Question

我有以下商店：

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

但它說“頁面未定義”。 我究竟做錯了什么？ 這可能嗎？

Answer 1

正如storeToRefs名稱所暗示的那樣，它返回 refs。 transStatus是一個 ref 並且沒有nextPage屬性，它是transStatus.value.nextPage 。 由於transStatus的工作方式和值是標量，過早解構nextPage會導致反應性喪失。

如果這是一個常見的使用場景，商店可以合並page計算。 由於商店 state 不應在商店外發生突變，因此page可以與setPage操作結合使用。