Vue の mapState を呼び出す

  • Vue

this.$store.state.PROPNAMEでストアのデータを呼び出せるが、長いので computed にまとめて呼び出すことが出来る。

mapState()がオブジェクトを返すので、直接 computed にぶちこむ

computed: mapState([
  'プロパティ名1',
  'プロパティ名2',
]),
  • this.$store.state.PROPNAME -> this.PROPNAME で呼び出し可能

返す値を整形したり、別の名前で定義したい場合はオブジェクトにする

computed: mapState({
  prop1(state) { return this.LOCAL + state.PROPNAME }, // this を使いたければ簡易構文を使う
  prop2: (state) => { ... },
}),

既存の computed と mapState 両方定義したい

Spread Operator を使う

computed: {
  ...mapState({
    prop1: (state) => { ... },
  },
  localProp() { ... },
  localProp2() { ... },
}),