如何有条件地从 Pinia getter 到 returns 对象解构对象属性？

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 名称所暗示的那样，它 returns 引用。 transStatus 是一个 ref，没有 nextPage 属性，它是 transStatus.value.nextPage。由于 transStatus 的工作方式和值是标量，过早解构 nextPage 会导致反应性丧失。

如果这是一个常见的使用场景，商店可以合并 page 计算。由于不应在商店外更改商店状态，因此 page 可以与 setPage 操作相结合。

如何有条件地从 Pinia getter 到 returns 对象解构对象属性？

How to destructure an object property from a Pinia getter that returns an object conditionally?

javascript

vue.js

pinia

如何有条件地从 Pinia getter 到 returns 对象解构对象 属性？

How to destructure an object property from a Pinia getter that returns an object conditionally?

javascript

vue.js

pinia

如何有条件地从 Pinia getter 到 returns 对象解构对象属性？