Странные обозначения в Vue: const {state = {}} = this. $ Store;

Question

Я слежу за уже созданным проектом, и я наткнулся на это обозначение в проекте Vue с Vuex:

const { state = {} } = this.$store;
const { orders = {} } = state;

Кажется, он определяет локальный объект с именем state, который установлен равнымзначение хранилища Vuex ... а затем установить его равным другому объекту под названием "заказы", но я немного растерялся в самой нотации. а именно, что это означает:

{ variable = {} } = anotherObj

, а также то, что эта запись называется, если она существует. (чтобы я мог его прогуглить и выяснить, как он справляется с глубоким клонированием и т. д., поскольку это, кажется, способ клонировать объекты.) ... или, может быть, это что-то особенное для vuex?

Answer 1

Это:

const { state = {} } = this.$store;

равно деструктурирующему назначению со значением по умолчанию , если источник (this.$store) либо не имеетt имеет свойство state или имеет его, но со значением undefined. В результате state будет иметь значение this.$store.state, если это свойство существует и не имеет значения undefined, или будет иметь новый пустой объект, если свойство не существует или имеет значение undefined.

Пример (используется строка вместо объекта, но это тот же принцип):

const obj1 = {};
const { a = "default" } = obj1;
console.log(a);        // "default"

const obj2 = {
    b: "value from obj2"
};
const { b = "default" } = obj2;
console.log(b);        // "value from obj2"