Использование только для чтения для реактивного объекта - PullRequest
Новая
       42

Использование только для чтения для реактивного объекта

0 голосов
/ 26 мая 2020

Предположим, у вас есть объект reactive, который вы хотите экспортировать как readonly, как описано здесь . 

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

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

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

Метод readonly(), похоже, не является частью VueCompositionAPI:

«экспорт 'только для чтения' не найден в '@ vue / Composition-api '

Я знаю, что при использовании ref вы можете просто использовать свойство computed 

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

Но для объекта reactive, где мы не хотим использовать .value каждый раз, это не представляется возможным. Я упустил что-то очевидное?

1 Ответ

1 голос
/ 26 мая 2020

Да, reactive не относится к плагину композиции api из-за ограничений языка (JS). Vue 3.0 решит это через прокси.

Второй вопрос, я дам вам прямой ответ: нет , вы не можете вернуть реактивное значение как доступное только для чтения свойство без использования вычисляемого свойства. Это невозможно, если вы не используете реализацию прокси (Vue 3.0 +).

Если вы спросите меня, я бы go с определением фрагментов computed варов на основе вашего reactive state. 

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 }
...