在反应对象上使用只读

Question

假设您有一个 reactive 对象，您想要将其导出为 readonly，如 here 所述。

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

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

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

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

"export 'readonly' was not found in '@vue/composition-api'

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

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

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

Answer 1

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

第二个问题，我直接给你回答：不行，你不能return一个只读的反应值属性而不使用计算属性。如果您不使用代理实现 (Vue 3.0+)，那是不可能的。

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

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

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

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

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 }

在反应对象上使用只读

Using readonly on a reactive object

javascript

vue.js

vue-composition-api