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の実装を行います。


関連記事

  • Vuex actionでローディングアイコンを表示する

    actionでajaxを行うときにローディングアイコンを表示させます。Vuexのstoreにloadingの状態を持つようにします。また、mutationでloadingの状態を変更でするようにします...


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

    Vuexのモジュールに定義したstateを各コンポーネントで参照する方法を紹介します。各コンポーネントではthis.$store.state.モジュール名で各moduleで定義したstateを取得でき...


  • Vuex actionでの非同期処理をasync/awaitの実装をする

    Vuexのactionではajaxなどの非同期処理を実装しますが、非同期処理をasync,awaitで実装する方法を紹介します。特別な制御はいりません。ファンクションを定義する箇所にasyncを追加し...


  • Vuexとaxiosを連携する

    ajaxの処理が増えるたびに同じmutationを実行するように処理を入れるのは大変なので、axiosの処理でmutationを実行するようにします。axiosにはinterceptorsという機能が...


  • Vuex actionの処理でaxiosでajaxを行う

    Vuexのactionでaxiosのライブラリを使ったajaxの処理を行います。処理の流れとして、http(axios)でajaxアクセスを行い、成功時はmutationをコールして、storeに取得...


  • Vue.jsにVuexを導入する

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


  • Vuex stateを作成して各コンポーネントで参照する

    実際にstoreを作成して、各コンポーネントでその値を参照できるようにします。mutations.jsにstateのオブジェクトを定義します。stateがアプリケーション全体の状態を管理します。


  • Vuex mutationでstateの値を変更する

    stateはmutationの処理でしか変更できません。コンポーネントからmutationを実行し、stateの値を更新する方法を紹介します。mutationを作成するにあたって、最初にmutatio...


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

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


  • Vuex 厳格(strict)モードでエラーになるよくある原因

    Vuexの厳格(strict)モードでエラーになってしまう原因でよくあるパターンです。stateに格納した配列をソートして表示するときに、stateの値をcomputedやgettersでそのままソー...