在反应对象上使用只读答案

【问题标题】：Using readonly on a reactive object在反应对象上使用只读
【发布时间】：2020-05-26 13:52:38
【问题描述】：

假设您有一个 reactive 对象，您希望按照 here 的说明导出为 readonly。

import { reactive, readonly } from '@vue/composition-api'

const graph = reactive({
  profile: {
    givenName: '',
    surName: '',
  }
})

return {
   profile: () => readonly(graph.profile)
}

readonly() 方法似乎不是 VueCompositionAPI 的一部分：

“在'@vue/composition-api'中找不到导出'readonly'

我知道在使用ref 时，您可以简单地使用computed 属性

return {
   profile: computed(() => graph.profile)
}

但是对于reactive 对象，我们不想每次都使用.value，这似乎是不可能的。我在这里遗漏了一些非常明显的东西吗？

【问题讨论】：

标签： javascript vue.js vue-composition-api

【解决方案1】：

是的，reactive 由于语言（JS）的限制，不属于合成 api 插件。 Vue 3.0 将通过代理解决这个问题。

第二个问题，我给你一个直接的答案：不，如果不使用计算属性，你不能将反应值作为只读属性返回。如果您不使用代理实现（Vue 3.0+），这是不可能的。

如果你问我，我会根据你的 reactive 状态定义 computed 变量块。

const graph = reactive({
  profile: {
    givenName: '',
    surName: '',
  }
})

return {
  profile: computed(() => graph.profile),
  another: computed(() => graph.another)
}

您必须使用.value，但至少您的回报会更清晰，并且您将允许对象解构而不会破坏反应性。如果我们对最后一种方法有创意，您甚至可以创建自己的助手：

function readonlyState(state) {
  const computeds = {}

  for (let key in state) {
    computeds[key] = computed(() => state[key])
  }

  return computeds
}

并使用它：

const graph = reactive({
  profile: {
    givenName: '',
    surName: '',
  }
})

return readonlyState(state) // { profile }

【讨论】：

这正是我想要的。非常感谢:)