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

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.jsでVuexをImportしてVuexのstoreを作成します。

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.jsでImportします。

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.js

関連記事