zukucode
主にWEB関連の情報を技術メモとして発信しています。

Vuex moduleに定義したstateをコンポーネントで簡単に取得する

Vuexのモジュールに定義したstateを各コンポーネントで参照する方法を紹介します。

ファイル構成

以下のようにmoduleが定義されているとします。

moduleA.js
const state = {
  message: 'テストです'
};

export default {
  state
};
index.js
// 一部抜粋
export default new Vuex.Store({
  modules: {
    moduleA
  }
  actions,
  getters,
  state,
  mutations
});

取得方法

各コンポーネントではthis.$store.state.モジュール名で各moduleで定義したstateを取得できますが、Vuex stateを作成して各コンポーネントで参照するで紹介したように、mapStateを使用します。

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      message: function (state) {
        return state.moduleA.message;
      }
    })
  }
};
</script>

mapStateの部分をES2015の記法でもう少しシンプルに書き換えます。

...mapState({
  message (state) => state.moduleA.message
})

更にシンプルにします。

...mapState({
  message ({ moduleA }) => moduleA.message
})

これだけシンプルになるので、ES2015の記法はVue.jsととても相性がいいと感じています。

Vue.jsを学習する上で知っておきたいES2015の文法Vue.jsでよく使われるES2015の文法を紹介しています。


続きを表示

関連記事

  • vueコンポーネントでvue-routerのページ制御を行う

    vueコンポーネントの処理でvue-routerのページ制御を行う方法を紹介します。vue-routerでページ遷移するときはrouter-linkのコンポーネントを使うことが多いですが、コンポーネン...


  • vueファイル(単一ファイルコンポーネント)をwebpackでビルド

    vueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。わかりやすくするため、空のプロジェクトから出来...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • vue-routerを導入してSPAを作成する

    Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション(spa)を作成します。最初にvue-routerのパッケージをインストールします。router-linkはナビ...


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • Vue.js axiosをajaxライブラリとして導入する

    Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。axiosの設定用にhttp.jsというファイルを作成します。エントリポイントのapp...


  • Vue.jsを学習する上で知っておきたいES2015の文法

    Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。objectの中...


  • Vue.js 独自のfilterを実装する

    Vue.jsで独自のfilterを実装して、各コンポーネントで使用できるようにします。コンポーネント内で定義することもできますが、今回はグローバルファンクションとして作成して、全てのコンポーネントで使...