Vue.js mapState について

state を参照したり、変換して取得したりするヘルパーのこと
スプレッド演算子と組み合わせて使うのが基本

めちゃくちゃわかりやすく纏まっている
Vuex: mapStateの使い方を理解する - Qiita

スプレッド演算子とは、配列やオブジェクトの要素を文字通り展開する構文
配列のスプレッド構文はECMAScript2015で標準
スプレッド構文はshallow copyなので、ネストしている場合は個別に分割する必要がある

const foo = {
  a: {
    b: 1,
    c: 2
  },
  d: 3
};

const bar = {
  ...foo,
  a: {
    ...foo.a,
    c: 4
  }
};
console.log(bar); // => { a: {b: 1, c: 4}, d: 3 }

分割代入(Destructuring assignment)とも組み合わせて使える

分割代入は配列やオブジェクトの要素を取り出して個別の変数に代入するのを簡単に行えるもの

const array = [1, 2, 3];
const [p, ...q] = array;
console.log(p); // => 1
console.log(q); // => [2, 3]

const obj = { foo: 1, bar: 2, baz: 3 };
const { foo, ...rest } = obj;
console.log(foo); // => 1
console.log(rest); // => { bar: 2, baz: 3 }

const nestedObj = {
  x: { a: 1, b: 2, c: 3 },
  y: [4, 5, 6]
};

const { x: { a, ...restX }, y: [y0, ...restY] } = nestedObj;
console.log(a); // => 1
console.log(restX); // => { b: 2, c: 3 }
console.log(y0); // => 4
console.log(restY); // => [5, 6]