Как обрабатывать нулевые значения из магазина при вызове их в шаблоне в Vue?

Question

Я работаю над проектом Vue, где в какой-то момент мне нужно отобразить данные из магазина (я использую Vuex) в шаблоне. Данные, к которым я хочу получить доступ, являются объектом. Однако в редких случаях этот объект имеет значение null, что приводит к следующей ошибке:

Невозможно прочитать свойство <свойство> из неопределенного.

Когда объект имеет значение null, Vue перенаправляет пользователя на другую страницу, но в любом случае, поскольку объект вызывается в шаблоне, он все равно выдает ошибку в консоли.

Тем временем, чтобы решить проблема, я использовал вычисленные свойства, где я проверяю значение из хранилища и возвращаю пустой объект, если он нулевой.

Я также использовал условия непосредственно в шаблоне.

Оба эти решения работают, но, с одной стороны, пустой объект не соответствует идиоме языка или, иначе говоря, кажется, что его не следует использовать таким образом. С другой стороны, поскольку мой иногда нулевой объект из хранилища отображается в разных местах шаблона, использование условия для проверки того, является ли объект пустым при каждом вызове, действительно приводит к тому, что шаблон становится «тяжелым».

Какое решение вы предлагаете? Есть ли лучшие альтернативы и каковы лучшие практики в этом сценарии?

Спасибо.

Answer 1

Это может быть достигнуто с помощью ES2020 опционального оператора цепочки (оператор Элвиса), либо встроенного, либо с соответствующим преобразованием Бабеля:

store?.non?.existent?.property

Vue использует Buble вместо Babel для шаблонного синтаксиса, это ограничивает поддерживаемые функции до , поддерживаемых Buble .

Не поддерживается дополнительное сцепление. предлагается использовать секцию скриптов для функций, которые не поддерживаются в шаблонах. Вместо шаблонов также можно использовать сторонние ( Loda sh _.get) или нестандартные решения для безопасной навигации, например:

Vue.mixin({
  methods: {
    safeGet: (o, path) => (
      path.replace(/\[(\d+)\](?=[[.]|$)/g, '.$1').split('.')
      .reduce((o, key) => (o == null) ? null : o[key], o)
    )
  }
})

...

{{safeGet(store, 'non.existent.property')}}