Как установить значения по умолчанию для inject/provide в Vue

Vue использует provide и inject как метод передачи данных на несколько уровней вниз без необходимости использовать свойства — но знаете ли вы, что можно установить значения по умолчанию для любых инжектированных данных, если они не были инжектированы в первую очередь? Давайте посмотрим, как это работает.

Установка значений по умолчанию с помощью provide и inject в Vue

Если вы не знаете, как работают provide и inject, вы можете прочитать об этом здесь. По умолчанию inject ожидает, что для ключа provide будет установлено значение по умолчанию, а если это не так, то будет выдана ошибка времени выполнения. Поэтому полезно установить значение по умолчанию, чтобы ошибка времени выполнения не возникла.

Итак, давайте рассмотрим пример. Допустим, вы предоставляете некоторые данные в своем родителе следующим образом:

<script setup>
    import { provide, ref } from 'vue'
    const message = ref('message');
    provide('myKey', message);
</script>

Если вы затем введете его куда-нибудь, вы можете использовать второй аргумент для установки значения по умолчанию. Например:

<script setup>
    import { inject } from 'vue'
    const message = inject('myKey', 'the default value')
</script>

В этом примере, если myKey не может быть найден, вместо значения по умолчанию будет установлено значение по умолчанию. Того же можно добиться с помощью API Options следующим образом:

export default {
    inject: {
        message: {
            myKey: 'the default value'
        }
    }
}

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