Vue 中的奇怪符号：const { state = {} } = this.$store;

Question

我正在关注一个已经创建的项目，并且我运行在一个带有 Vuex 的 Vue 项目中使用这个符号：

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

它似乎在定义一个名为 state 的本地对象，该对象设置为等于 Vuex 存储的值...然后将其设置为另一个名为 "orders" 的对象，但我有点迷路在符号本身上。即这表明：

{ variable = {} } = anotherObj

以及此表示法（如果存在）的名称。（这样我就可以 google 它并弄清楚它是如何处理深度克隆的，等等，因为它似乎是一种克隆对象的方法。）...或者这可能是 vuex 特有的东西？

Answer 1

这个：

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

是 destructuring assignment，具有 默认值 如果源 (this.$store) 没有属性 state 或拥有它但值为 undefined。结果将是，如果属性存在且不具有值 undefined，则 state 将具有 this.$store.state 的值，或者如果属性不存在或值为 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"

Vue 中的奇怪符号：const { state = {} } = this.$store;

Strange notation in Vue: const { state = {} } = this.$store;

javascript

vue.js

vuex

notation