Vuexのステートの使い方を覚えて状態を管理しよう｜Vuex

質問者

Vuexストアのステートって何ですか？使い方を教えてください。

Vuexストアのステートはアプリケーション全体の状態を保持するオブジェクトです。アプリケーション全体で使用される情報をステートで管理すると保守性が高まります。たとえば、ログイン中のユーザー情報、ECサイトにおける商品情報、ユーザーの端末情報など複数の場所で使用される可能性のあるデータはステートで管理するとよいです。ではステートの定義方法と参照方法についてみていきましょう。

1 ステートを定義してみよう
2 状態の参照について(state)

ステートを定義してみよう

const store = new Vuex.Store({
  // ステートを定義する
  state: {
    login: false
  }
})

const store = new Vuex.Store({

// ステートを定義する

state: {

}

})

ステートを定義するには、上記のようにストアの生成時にstateオプションを指定して、その中に管理したい情報を定義します。今回の場合は、loginという情報を定義しました。

状態の参照について(state)

ではつぎに先ほどステートに定義したloginの値を参照する方法を覚えましょう。ステートはstore.stateから参照することができます。

const store = new Vuex.Store({
  state: {
    login: false
  }
})

console.log(store.state.login) // falseが表示されます

const store = new Vuex.Store({

state: {

}

})

console.log(store.state.login) // falseが表示されます

上記の場合は、ストアの定義がスコープ内であったため問題なく参照できましたが、実際は別のコンポーネントから参照することがほとんどだと思います。その場合は、すこし工夫が必要です。

まず前提として、ルートコンポーネントにstoreオプションを指定してどこからでもストアにアクセスできるようにしておきます。詳しくはこちらの記事に書きました。

そして下記のようにコンポーネント内に算出プロパティ(computed)を定義して、this.$store.state.loginでステートに定義したloginの値を参照します。this.$storeはルートコンポーネントに指定したstoreを参照しています。

export default {
  computed: {
    login: function () {
      return this.$store.state.login
    }
  }
}

export default {

computed: {

return this.$store.state.login

}

これでコンポーネントからステートに定義したloginの値を参照できるようになりました。

複数のステートプロパティが必要な場合はmapStateヘルパーを使う

上記のように、loginというステートプロパティのみを算出プロパティで参照するだけであれば問題ありませんが、コンポーネント内で複数のステートプロパティが必要な場合、参照するステートプロパティ分の算出プロパティを宣言するのは冗長です。

その問題は、mapStateヘルパーを使うことで解決できます。mapStateヘルパーは下記のように使います。

import { mapState } from 'vuex'  // #1 ヘルパーをインポートする

export default {
  // #2 算出プロパティを宣言する
  computed: mapState({
    loginAlias: 'login',  // loginAlias: state => state.loginと同義
    deviceAlias: 'device' // deviceAlias: state => state.deviceと同義
  })
}