如何從 Pinia getter 有條件地解構物件屬性?
P粉148434742
P粉148434742 2023-11-08 17:47:18
0
1
752

我有以下商店:

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

現在假設我想將上面的「keyword」屬性轉換為 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);

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

P粉148434742
P粉148434742

全部回覆(1)
P粉394812277

storeToRefs 名稱所示,它會傳回引用。 transStatus 是一個引用,沒有 nextPage 屬性,它是 transStatus.value.nextPage。由於 transStatus 的工作方式以及該值是標量,過早解構 nextPage 會導致反應性喪失。

如果這是常見的使用場景,商店可以合併 page 計算。由於商店狀態不應在商店外部發生變化,因此 page 可以與 setPage 操作結合使用。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板