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

Vue.jsにVuexを導入する

Vuexを導入する手順の作業メモです。

Vuexを利用することにより、各コンポーネントで保持していたデータをstateにまとめられるので、ある程度規模が大きくなっても耐えられるプログラムを作成できます。

開発環境やフォルダ構成はwebpack モジュールのパスを絶対パスで指定する方法で扱ったものと同様とします。

パッケージのインストール

Vuexのパッケージをインストールします。

$ npm install --save-dev vuex

storeの作成

storeフォルダを作成し、その中にVuexで必要なgetters,actions,mutationsを作成します。

ファイルの中身は空でOKです。

フォルダ構成は以下のようになります。

  • js
    • app.js (エントリポイント)
    • components
      • App.vue
    • store
      • actions.js
      • getters.js
      • mutations.js
      • index.js

store/index.jsVuexImportしてVuexstoreを作成します。

index.js
import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from 'js/store/actions';
import * as getters from 'js/store/getters';
import { state, mutations } from 'js/store/mutations';

Vue.use(Vuex);

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations
});

そして作成したstore/index.jsをエントリポイントのapp.jsImportします。

app.js
import Vue from 'vue';
import store from 'js/store';
import App from 'js/components/App.vue';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

まだstoreにはまだ何もない状態ですが、これでVuexの導入ができました。

Vuex stateを作成して各コンポーネントで参照するで実際にVuexの実装を行います。


続きを表示

関連記事

  • 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を実装して、各コンポーネントで使用できるようにします。コンポーネント内で定義することもできますが、今回はグローバルファンクションとして作成して、全てのコンポーネントで使...