Vuexのステートについて

Vue.jsを使用するときに、アプリケーションの状態を管理するためにVuexを使うことがほぼだと思いますので、これから何回かに渡ってVuexについての基本的な使い方をまとめようと思います。

今回はVuexについて少し触れて、あとはステートについてまとめようと思います。

なぜVuexを使う必要があるのかというと、アプリケーション全体の状態を１つの場所で管理しておけば、現在のアプリケーションの状態のスナップショットが容易になるのでデバッグしやすくなります。

• Vuexはsingle state tree（アプリケーション全体の状態が１つのオブジェクトツリーに格納される）
• スナップショットが容易なのでデバッグしやすい

Vuexを使うときはVuex専用のファイルを作ってそれをルートコンポーネントでインポートする使い方が一般的です。

// store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex); // SFCを使う場合はこの記述を書く -> この記述で各コンポーネントでstoreを参照できるようにする機能が有効になります。
export default new Vuex.Store({
  state: {
    aaa // ステートプロパティを設定していく
    bbb
    hoge: 10
  }
})

store.jsをルートコンポーネントに設定する

import store from "./store";
new Vue({
  store, // SFCを使う場合はこの記述を書く -> この記述で各コンポーネントでstoreを参照できるようになりました。
  aaa: 1,
  bbb: 5,
  hoge: 10
})

これでVuexを使う準備と、SFCでstoreを参照できる設定が完了です。
各コンポーネントでstoreを参照する方法は以下です。

this.$store.state.hoge // これで設定したステートプロパティにアクセスできます。（例でhogeプロパティを参照しています。）

ただこの書き方は冗長過ぎて面倒なので、短縮できる仕組みが用意されています。
その仕組みをmapStateヘルパーといいます。これを使うと以下のように省略して書くことができます。

コンポーネント側で、算出プロパティにmapStateヘルパーを設定します。

computed: {
  ...mapState(["aaa", "bbb", "hoge"]),
  computed01() {...},
  computed02() {...}
}

そうするとコンポーネント側でステートプロパティを参照したいときはこれくらい短く書けます。

this.hoge // mapStateヘルパーを使う前はthis.$store.state.hoge

mapStateヘルパーはcomputedにスプレッド演算子で設定します。
mapStateヘルパーは以下の特徴があるのでこのように設定できます。

• mapState内ではthis.$store.stateと同じ意味としてstateが使える

なのでmapStateの正体はただ算出プロパティにステートプロパティのゲッターを設定しているだけです。

mapState({
  aaa: state => state.aaa,
  bbb: state => state.bbb,
  hoge: state => state.hoge
})

しかもmapStateには以下の特徴もあります。

• 算出プロパティの名前（ここではaaaとかbbbとかhogeとか）とステートプロパティの名前（こっちもaaaとかbbbとかhogeとか）が同じならmapStateに文字列配列を渡すだけでいい

なのでここまでシンプルに書けます。

  mapState(["aaa", "bbb", "hoge"]),

最後に、なぜスプレッド演算子を使わないといけないか説明します。
mapState()はオブジェクトをリターンするので、mapState(["aaa", "bbb", "hoge"])を実行したときに返り値は以下になります。

{
  aaa() {
    return this.$store.state.aaa
  },
  bbb() {
    return this.$store.state.bbb
  },
  hoge() {
    return this.$store.state.hoge
  },
}

そうすると、算出プロパティに他の関数をセットしたいときに以下のようになり問題が起こります。

computed: {
  {
    aaa() {
      return this.$store.state.aaa
    },
    bbb() {
      return this.$store.state.bbb
    },
    hoge() {
      return this.$store.state.hoge
    },
  },
  computed01() {...},
  computed02() {...}
}

そこでスプレッド演算子を使ってオブジェクト同士をマージします。（mapStateの返り値と、computed01() {...}とかcomputed02() {...}をマージする）

...mapState(["aaa", "bbb", "hoge"]),

そうすると算出プロパティの中が以下のようになります。

computed: {
  aaa() {
    return this.$store.state.aaa
  },
  bbb() {
    return this.$store.state.bbb
  },
  hoge() {
    return this.$store.state.hoge
  },
  computed01() {...},
  computed02() {...}
}

長くなりましたが、Vuexのステートについて基本的な使い方でした。
ここまで読んでいただいてありがとうございました！！！

参考資料
ステート | Vuex