在反應式 object 上使用只讀

Question

假設您有一個reactive object，您希望按照此處的說明將其導出為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 object，我們不想每次都使用.value ，這似乎是不可能的。 我在這里錯過了一些非常明顯的東西嗎？

Answer 1

是的，由於語言（JS）的限制， reactive不屬於組合 api 插件。 Vue 3.0 將通過代理解決這個問題。

第二個問題，我給你一個直接的答案：不，你不能在不使用計算屬性的情況下將反應值作為只讀屬性返回。 如果您不使用代理實現（Vue 3.0+），這是不可能的。

如果你問我，我會 go 根據你的reactive式 state 定義computed變量塊。

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

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

您必須使用.value但至少您的回報會更清晰，並且您將允許 object 解構而不會破壞反應性。 如果我們對最后一種方法有創意，您甚至可以創建自己的助手：

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 }