vue 3 typescript中怎么为reactive中的computed定义类型?

  • Z时代
  • 2024-02-05
  • 分类：IT

  1. 如果我在一个reactive中把对象的值设置为computed(顺便问下这么操作是合理的吗)那么请问怎么在typescript中给这个interface定义呢?
import { reactive } from 'vue'
interface ITableCustomFilter {
  name: {
    defaultNameOpts: ??? // 这里如何定义呢 要考虑到在template自动unwrap
  };
}
const tableCustomFilter = reactive<ITableCustomFilter>({
  name: {
    defaultNameOpts: [], //这里初始值又该如何设置呢
  },
});
// 这里是初始化的函数 defaultNameOpts结构是{ label: string; value: string }[]
function initTableFilterData() {
  tableCustomFilter.name.defaultNameOpts = computed(() =>
    tableMainData.value.map((item) => ({
      label: item.name,
      value: item.value,
    }))
  );
}

回答：

import { ComputedRef, computed, reactive } from 'vue'
interface ITableCustomFilter {
  name: {
    defaultNameOpts: ComputedRef<{ label: string; value: string }[]>
  };
}
const tableCustomFilter = reactive<ITableCustomFilter>({
  name: {
    defaultNameOpts: computed(() => []),
  },
});
function initTableFilterData() {
  (tableCustomFilter.name.defaultNameOpts as any).value = tableMainData.value.map((item) => ({
    label: item.name,
    value: item.value,
  }));
}

回答：

不合理，computed 不应该放在方法里面，并且 computed 是里面管理的对象改变了就会执行

const tableCustomFilter = computed(() => ({
    name: {
        defaultNameOpts: tableMainData.value.map((item) => ({
          label: item.name,
          value: item.value,
        }))
    }
}))

这个类型你也不用定义，ts 会根据 tableMainData.value 自动推导出来

以上是 vue 3 typescript中怎么为reactive中的computed定义类型? 的全部内容， 来源链接： utcz.com/p/934590.html

回到顶部